Deploying Hugo on S3 using wercker

I am trying to deploy a website on S3 using wercker. So I have a git repo with the config.toml and the wercker.yaml.The build goes fine on wercker with all the files I can see them on S3. When I hit the website I get an error like this for all my js ,css and img files: net::ERR_CONNECTION_TIMED_OUT

the website is www.stencilled.me

What could I be doing incorrect or need to check in.

thank you.

I’m not seeing anything in your html <head>, first of all, but that’s not the the issue here…

The problem is that I have no access to your S3 account, but when you check the bucket, is everything pushing to the account correctly? I believe that you can check your files from within the AWS UI?

I do see all the files under the bucket from the UI. I can see individual files too and its contents(js and css). Bu t it times out saying not reachable.

Perhaps this is caused by your bucket policy? If I visit your website now, I get a 403 forbidden error message. See here for the bucket policy needed for a static website hosted on S3.

1 Like

Currently I am not able to deploy because I get an error saying bucket not found when deploying from Wercker. Let me fix that and I shall update it here accordingly.

You’re on the good track; I can visit your webpage now without the 403 error. :slightly_smiling:

I see that main.css, pygments_highlights.css, and highlight.min.css still trigger a 403 error. If you’re stuck, you can try to remove those files from the bucket and re-upload them. It might be that they were uploaded with the wrong access policy, since your index.html did succeed in uploading and being publicly accessible.

The request url goes as

http://www.stencilled.me/www.stencilled.me/css/main.css

Is this how the config should be "

baseurl = "www.stencilled.me"
languageCode = "en-us"
title = "Stencilled"
theme = "beautifulhugo"
pygmentsUseClasses = true
pygmentCodeFences = true

Thank You.

I’d add http:// in front of base url. I’ve personally never defined base url without such a prefix for my Hugo sites.

Your theme might also have information over how to configure the base url when in doubt.

Thanks . I shall try that . I just checked the bucket for index.html and if you check this one it picks up the theme as well

https://s3.amazonaws.com/www.stencilled.me/index.html

@Jura This is how the folder structure looks like inside s3 bucket:

Not sure if we’re on the same page here. The base url that I mentioned in my previous post doesn’t have to do with how your folders and files are structured. Instead, the base url is simply the root address of your website (http://www.example.com) and sort of the entry point of your folder structure.

Or do you want me to show something else with your screenshot? From my standpoint, it looks okay and comparable to my S3 buckets. (firstpost is a bit of an odd folder though, but if that’s something you want, then Hugo is flexible enough to do that.)

Sorry if I went off track. This is what I have done so far.i have the config and wercker yaml at https://github.com/senthilthyagarajan/stencilled.me . After the deployment whem I see the website http://www.stencilled.me/ it doesnt seem to pick the css files as they throw up 404 error.But when I see the index.html file it seems to be correctly showing with the theme https://s3.amazonaws.com/www.stencilled.me/index.html .Both of these however have wrong redirects for other pages in them . I follwed this tutorial : http://doc.lijun.li/web-hugo-aws-s3-wercker.html .

What seems to be missing from that tutorial is configuring the S3 buckets: the tutorial you link only discusses creating a user and IAM policy. While important, I also think you’ll need to configure your bucket to serve a website. See this tutorial for that, particularly step 1 & 2.

The reason why I still think you need to configure your bucket for static website hosting is that your website should not be accessible at https://s3.amazonaws.com/www.stencilled.me/index.html . That’s because you cannot use a DNS record against that address to resolve www.stencilled.me to that file location.

Your wercker config file looks okay (though you do use an old version of Hugo, but that may be deliberate for some reason), and your config file points to the wrong base url.

If you follow the AWS tutorial for static website hosting, you’ll get the publicly accessible website URL for your bucket, which will be something like http://www.stencilled.me.s3-website.eu-central-1.amazonaws.com.

Good luck!

1 Like

Something is wrong in your templating…

Use relURL, for example…

<script src="{{ "js/main.js" | relURL }}"></script>

And test it locally. HTH.

@rdwatters In local I see it like this

<script src="http://localhost:1313//js/main.js"></script>

Thanks @Jura . This is how my URL looks like http://www.stencilled.me.s3-website-us-east-1.amazonaws.com

Using relURL and with my exact example in your templates?

Do you have relativeURLs set to true in your site config?

Your assets (in this case, your .js files) are not being ported over correctly because you have something set incorrectly in your configuration and/or templating; i.e., the browser is currently looking for a directory called www.stencilled.me…which doesn’t exist.

@rdwatters Here is my config and the whole website I am trying to deploy

I dont have any relative url parameter .

Thank You for your time again.

These are the lines I’m talking about:

  1. I would recommend contacting the theme’s author since this is going to inevitably cause others trouble the same way it has for you; better yet, submit a pull request.
  2. You need the full URL, including protocol, in your site’s configuration file for your baseURL
  3. Copy everything in this file over to a new file at layouts/partials/footer.html and then change lines 199&200 to what I mentioned above:
<script src="{{ "js/main.js" | relURL }}"></script>
<script src="{{ "js/highlight.min.js" | relURL }}"></script>

Then set this line in your configuration to relativeURLs = true.

Let me know how that works out :smile:

Try setting baseURL to an empty string. ""
I get the feeling this is something related to the way you specifically have your S3/router set up…

Or something about the way baseURL works with respect to your extra-long S3 baseURL, but this is all just a guess.

Also, I’m assuming you want to deploy to stencilled.me and not http://www.stencilled.me.s3-website-us-east-1.amazonaws.com