Public not being properly rendered but server is?

[toddmcintire]

Hello everyone,

Im trying to build a new personal website using hugo and a theme I really liked. After creating a few test draft pages and changing a few things on the site to how I wanted it, I felt I was ready to try and put it up on my server to at least test out. But when I called hugo -D my website came out looking like so.

Now I know its got to be something that ive messed up somewhere, but im having trouble figureing it out.

baseURL = "http://www.toddmcintire.com/"
title = "Todd McIntire"
paginate = 5
theme = "PaperMod"
enableRobotsTXT = true
buildDrafts = false
buildFuture = false
buildExpired = false
googleAnalytics = ""

[minify]
disableXML = true
minifyOutput = true

[params]
env = "production"
title = "Todd McIntire"
description = "Todd McIntire's personal website"
keywords = [ "Blog", "Portfolio", "PaperMod" ]
author = "Todd McIntire"
images = [ "<link or path of image for opengraph, twitter-cards>" ]
DateFormat = "02 Jan 2006"
defaultTheme = "auto"
disableThemeToggle = false
ShowReadingTime = true
ShowShareButtons = true
ShowPostNavLinks = true
ShowBreadCrumbs = true
ShowCodeCopyButtons = true
disableSpecial1stPost = false
disableScrollToTop = false
comments = true
hidemeta = false
hideSummary = false
showtoc = false
tocopen = false

  [params.assets]
  favicon = "/media/favicon.ico"
  favicon16x16 = "/media/favicon-16x16.png"
  favicon32x32 = "/media/favicon-32x32.png"
  apple_touch_icon = "/media/apple-touch-icon.png"
  safari_pinned_tab = "/media/safari-pinned-tab.svg"

  [params.label]
  text = "Home"
  icon = "/media/favicon.png"
  iconHeight = 35

  [params.profileMode]
  enabled = false
  title = "Todd McIntire"
  subtitle = "Software Engineer"
  imageUrl = "/media/android-chrome-256x256.png"
  imageWidth = 120
  imageHeight = 120
  imageTitle = "my image"

    [[params.profileMode.buttons]]
    name = "Posts"
    url = "posts"

    [[params.profileMode.buttons]]
    name = "Projects"
    url = "projects"

    [[params.profileMode.buttons]]
    name = "Tags"
    url = "tags"

  [params.homeInfoParams]
  Title = "Todd McIntire"
  Content = "software engineer"
  
  [[params.socialIcons]]
  name = "email"
  url = "mailto:mail@toddmcintire.com"

  [[params.socialIcons]]
  name = "linkedin"
  url = "https://linkedin.com/in/toddmcintire"

  [[params.socialIcons]]
  name = "github"
  url = "https://github.com/toddmcintire"

[params.analytics.google]
SiteVerificationTag = ""

[params.analytics.bing]
SiteVerificationTag = ""

[params.analytics.yandex]
SiteVerificationTag = ""

  [params.cover]
  hidden = true
  hiddenInList = true
  hiddenInSingle = true

  [params.fuseOpts]
  isCaseSensitive = false
  shouldSort = true
  location = 0
  distance = 1_000
  threshold = 0.4
  minMatchCharLength = 0
  keys = [ "title", "permalink", "summary", "content" ]


[[menu.main]]
identifier = "posts"
name = "posts"
url = "/posts/"
weight = 10

[[menu.main]]
identifier = "projects"
name = "projects"
url = "/projects/"
weight = 20

[[menu.main]]
identifier = "tags"
name = "tags"
url = "/tags/"
weight = 30

[[menu.main]]
identifier = "resume"
name = "resume"
url = "/resume/resume.pdf"
weight = 40

[jmooring]

When visiting the live site, open your browser’s dev tools and examine the messages displayed in the console.

[toddmcintire]

I did this on both my website and a quick test website with just the default sample config of the theme and got the same error on both.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///assets/css/stylesheet.d7fb4cbf980fe688a21621b06a795933c4e6bb2d4070ec940667af1715d84af2.css. (Reason: CORS request not http).

[jmooring]

Excellent—you’ve identified the cause. You are serving your site via http, but are attempting to access an asset via a different protocol.

See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp.

[jmooring]

Follow-up: are you trying to view the site locally by opening public/index.html directly from the file system?

[toddmcintire]

yeah i’m opening by dragging it in my browser of choice.

[jmooring]

Don’t do that. To preview the site locally, run hugo server.

[toddmcintire]

Gotcha, is there any way to verify that everything works before fully deploying it to my own hosting solution? Would putting it in something like a nginx docker image be alright?

[jmooring]

I think using Hugo’s built-in server is sufficient for most sites (workflow = dev → production). But if you want to test error pages, redirects, etc., consider dev → staging → production.

[frjo]

You need to run a web server. Nginx will work perfectly. As will Apache, Caddy or more or less anything else.

[toddmcintire]

Ok so after verifying that it worked in a quick test docker image on my local machine I remoted into my hosting machine and rebuilt the docker image (I also use docker to host my images on my server it was just easier this way.)
Upon checking the production version of the website it looks like the first picture I attached in my first post. Any ideas?

[jmooring]

When visiting the live site, open your browser’s dev tools and examine the messages displayed in the console.

[toddmcintire]

The file is in the folder that I used when creating the docker image/container, I tried recreating it with no change.

[jmooring]

Look at the href attribute to the file that cannot be found:

href="/www.toddmcintire.com/assets/css/stylesheet.min.48a18943c2fc15c38a372b8dde1f5e5dc0bc64fa6cb90f5a817d2f8c76b7f3ae.css

I’m not sure what you’re doing, but you’re doing it wrong.

[toddmcintire]

im not too sure either, I followed the basic sample Dockerfile from the nginx docker page. It should just copy the folder over.

[toddmcintire]

Fixed it. After a long day I didn’t notice it but I was pushing my changes to a git repo and expecting the changes on my branch to be on the master. So I was changing the files and just downloading the master one that was older.
Everything seems to work now so I do thank you!