Theme Appearance different from local to internet

I’m using the MyPortfolio Theme and don’t know why the theme appears differently between my local server and the S3 bucket.

See photo of the difference: I can send a pdf or jpg showing the difference upon request.

Hi @FodorTheMagnificent. We would like to help you, but emailing for images is not how we do it around here. In fact, I’d edit the post and remove your email if I were you, to discourage folks from emailing you those kinds of things. Better to troubleshoot out here in the open, so we can all help. :slight_smile:

We have a post at Requesting Help with recommendations on getting help. For your issue, I recommend packaging up the site you are working on, either in a repo or as a zip, for instance, and sharing a link to it, so folks can download it and build it themselves, to see how it works. Also share the link of the online site, to compare.

If you can’t share those things for a non-technical reason (a client site, something like that), then start a new project and reproduce the issue, and share it.

You’ll also want to explain how you are uploading your site to S3. That’s important. :slight_smile:

Thanks, Here the link to the jpg of what I’m getting.:https://s3-us-west-2.amazonaws.com/bcory.cloud/localVSs3bucket.jpg

I use the s3 bucket to upload button to upload the files to the S3 bucket.
Here is the link to my Git repository:
FodorTheMagnificent/myportfolio

The online site is 7thheaven.cloud

Your git repo is basically empty. We aren’t going to be able to assist you without seeing your site. That’s how this works.

Anyhow, your theme files aren’t being copied up the bucket, or aren’t being referenced correctly. If you can’t share any more information here, I suggest you post in #services or find someone with S3 experience to assist you. :slight_smile:

Thanks, that helps. Your baseURL is set to example.org. Change it to 7thheaven.cloud.

Your CSS is there at http://7thheaven.cloud/plugins/bootstrap/css/bootstrap.min.css, but you are loading it from http://example.org/plugins/bootstrap/css/bootstrap.min.css.

Here is my newly uploaded repository on github

Thanks maiki I did change my base URL to 7thheaven.cloud but still don’t get the theme to take hold.

That is the line you need to change. Then rebuild the site, and upload all the files up to S3 again.

I did as you requested, changed the toml file, rebuilt the site doing a hugo command then uploaded the files and still no luck.

I verfied that the toml file had the change, for some reason when I rebuild the site, it changed the toml back to example.com? So I individually edited the .toml file and uploaded that one file.

I downloaded your repo, and the theme, and the site produced in public has the correct URL. So try it again, maybe try cloning your repo into another directory on your computer and trying from there.

Also, you are putting https:// on your URL, but it isn’t set up yet. Use http:// for now, then change it after you know it resolves. :slight_smile:

Thanks for trying to help. I’m afraid I’m giving up on HUGO and switching to another static site generator.
I might try Jekyll or similar.

I wish I could find a theme that works easily enough. Maybe I selected a difficult theme?

No, the issue isn’t the theme. If you’ve got it working when you run hugo server then the problem lies with how you’re uploading it to s3 (or setting the baseURL in config.toml).

How am I supposed to upload it to the S3 bucket on Amazon?

Sorry - that may have been my misunderstanding. Reading between the lines in this thread I had assumed you were building the site on your local machine and then copying the files from /public to an S3 bucket. However, there may be another way you’re deploying to S3.

That’s exactly how, building it locally then copying the folder /public and putting the folder and everything inside it to my S3
bucket.

When navigate to your site by URL

http://7thheaven.cloud/

All looks fine Ehh nevermind I see it’s your old Jekyll site

So back to @maiki’s suggestion, have you tried using http instead of https in your baseURL?

Hey there, I also ran into lots of trouble with the BaseURL when I started with Hugo a few months ago.

What worked for me was to set baseURL = “/” in config.toml. For some reason any other URL I would put there would fail to build the site correctly. However, you need to go into every reference for the BaseURL in the Layouts so that links don’t add another slash after calling {{Site.BaseURL}}

example that works: <link rel="stylesheet" href="{{.Site.BaseURL}}css/bundle.css">
this doesn’t: <link rel="stylesheet" href="{{.Site.BaseURL}}/css/bundle.css">

Also works: <script src="{{.Site.BaseURL}}js/jquery-2.x.min.js"></script>
Not works: <script src="{{.Site.BaseURL}}/js/jquery-2.x.min.js"></script>

You can delete every slash by running a find and replace in your editor like so
Find: BaseURL}}/
Replace: BaseURL}}
If you hit replace all, you can change all instances per page in one click. You should run that find/replace on each page in your layouts folder to make sure.

Hope this helps! Don’t give up on Hugo, I struggled a lot to understand it, but I found it all makes sense in the end after some pain and taking time to let it sink in.