Comitting the doks to github, seems like Sass/Scss converted to single css file, css not loading

[raqueeb]

Since I'm trying to deploy the doks to github page via npm, initially I started the development process by

1. npm run start --- I do the editing.

Then building it, with

2. npm run build

It builds a public folder. All the Sass/Scss files converted to single css file. I tend to push the pulic forder contents to main github branch and set this up as gh-pages, the index.html file loads up without the css rendeting.

What am I missing?

I'm confident with hugo, can I do the whole thing with hugo only - not npm?

Thank you.

[epogrebnyak]

@raqueeb - npm is most needed to update dependecies - with npm install, this way you are safe you have the latest of required libraries

Later on in your workflow you can work with hugo commands, npm works as a script runner, defined in package.json

For example npm build is just hugo --gc --minify && npm run build:functions for here https://github.com/h-enk/doks/blob/master/package.json#L17

Does this help?

[epogrebnyak]

@raqueeb - do you have a repo link for your project? Does the site render the way you wanted on a local machine?
Did you cange baseurl to you Github page?

[raqueeb]

@epogrebnyak Thank you for the kind response.

The repo link is here https://github.com/aiwithr/newsite

and while loading https://aiwithr.github.io/newsite/, it does not load the css file. It shows in the sources, but the file content is empty. I pushed it through git, and it converted to unix line ending by default.

I tried with git web upload, but it still does not load the css. I don't need the js file, so, I didn't push.

but it works flawlessly with localhost.

[epogrebnyak]

This is your html, I need your source folder to be able to help, the folder you run hugo at.

[epogrebnyak]

Can you share that too?

[raqueeb]

Thank you. You are spot on at the baseurl thing. I have changed it to /newsite/, now it loads the css.

I added the custom font in $\doks\assets\scss\common_fonts.scss

@font-face {
  font-family: "SiyamRupali";
  src: 
    local("Jost"),  
    url('/fonts/vendor/jost/SiyamRupali.woff') format('woff');
  font-weight: normal;
  font-style: 400;
  font-display: block;
}
/* jost-regular - latin */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Jost"),
    url("/fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),
    url("/fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

I have to update this as

  font-family: "SiyamRupali";
  src: 
    local("Jost"),  
    url('/newsite/fonts/vendor/jost/SiyamRupali.woff') format('woff');
  font-weight: normal;
  font-style: 400;
  font-display: block;
}

Other system fonts are loading, but it's not adding /newsite/ to the custom font. I believe I have to add it manually.

[epogrebnyak]

Glad it works better now! On extra font - maybe put a separate question in discussion and provide the source repository. That part I have not tried, and know little about, but maybe someone else can help. пт, 5 февр. 2021 г., 11:19 Rakibul Hassan <[email protected]>:

…

Thank you. You are spot on at the baseurl thing. I have changed it to /newsite/, now it loads the css. I added the custom font in $\doks\assets\scss\common_fonts.scss @font-face { font-family: "SiyamRupali"; src: local("Jost"), url('/fonts/vendor/jost/SiyamRupali.woff') format('woff'); font-weight: normal; font-style: 400; font-display: block; } /* jost-regular - latin */ @font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: local("Jost"), url("/fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"), url("/fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } I have to update this as @font-face { font-family: "SiyamRupali"; src: local("Jost"), url('/newsite/fonts/vendor/jost/SiyamRupali.woff') format('woff'); font-weight: normal; font-style: 400; font-display: block; } [image: image] <https://user-images.githubusercontent.com/32799073/107007702-1abce900-67bd-11eb-8250-6c6bb48be679.png> Other system fonts are loading, but it's not adding /newsite/ to the custom font. I believe I have to add it manually. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#110 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGWBLSPNTYEWGFDTHWDXUTS5OSZXANCNFSM4XCGMD5A> .

[h-enk]

What am I missing?

I've set up instructions how to deploy a site to GitHub Pages — automatically.

See: https://getdoks.org/docs/recipes/deployment/#deploy-to-github-pages

[raqueeb]

@h-enk Thank you. That's for Netlify only. Hope it works for gh-pages too.

Meanwhile, in the

Alert

alert = true,

The href=link color is same as beige.

if I uncomment, the alerts.scss

/*
.alert-light {
  color: #215888;
  background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef);
}

.alert-light .alert-link {
  color: #215888;
}
*/

It should work as light.

[h-enk]

@h-enk Thank you. That's for Netlify only. Hope it works for gh-pages too.

No, that's for GitHub Pages ONLY

[raqueeb]

Thank you @h-enk for the clarification.

The alert seems cool. What to do for this case?

/*
.alert-light {
  color: #215888;
  background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef);
}

.alert-light .alert-link {
  color: #215888;
}
*/

[epogrebnyak]

I think github actions is up into learning curve - the simplest form is publish manually to docs folder to see if it works, next is publish into gh-pages branch possibly with ghp-import. I would say Githab Actions is the third deployment mode, not really a default, imo. пт, 5 февр. 2021 г., 16:19 Henk Verlinde <[email protected]>:

…

What am I missing? I've set up instructions how to deploy a site to GitHub Pages — automatically. See: https://getdoks.org/docs/recipes/deployment/#deploy-to-github-pages — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#110 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACGWBLUTGJ42LH7HP4DKKB3S5PV5BANCNFSM4XCGMD5A> .

[h-enk]

I think github actions is up into learning curve

That's why I set up instructions: follow along and it just simply works!

[raqueeb]

Thank you. Initially I changed the baseurl, and it worked for localhost/ without the /baseurl. That is expected. @h-enk

Now, with the baseurl it works for gh-pages, but not on localhost or localhost/baseurl.

Any idea please?

[h-enk]

@raqueeb,

1. In ./config/_default/config.toml set baseurl = "/"
2. In ./config/production/config.toml set baseurl = "https://h-enk.github.io/doks-gh-pages/" (change the URL of course)

You could also check the example repo showing how to publish to GitHub Pages.

[raqueeb]

@h-enk This is a lifesaver tip!

Many thanks indeed!