How To Build A Website | Github Pages | Jekyll | Template

[@SpencerPaoHere]

Temporary Fix to 11:00 github.com/alshedivat/al-folio/issues/537

[@yonathanevan]

Do you know how to use and accessing env variable into the jekyll project? thanks

[@Vampyricx]

I've watched this video so many times, every new page I make I come back to this video. Thank you so much for providing such a helpful guide!

[@steffaniasierragalvis9573]

This video was soooo helpful!!! I was completely lost about how to add the jekyll repository to my own github page, and you explained it really clear. Thank you so much for your content!!

[@seyedefatemekhademi5107]

Hi steffaniasierragalvis can I ask you which version of ruby did you install ?

[@aperturetv9]

Pretty helpful even for a non-SW engineer like myself. Only part, I didn't understand is the deployment part. I am working with another jekyll repo and it seems only thing I need to do is to git push instead of bin/deply --user command. In fact, I'm my repo, there is no github folder or bin folder. So, a little confused with this part.

[@SpencerPaoHere]

Glad you liked it! Yeah. Deployments are different depending on what type of infrastructure you are using. The bin/deploy just so happens to be the launcher for the github pages I did for this. The main reason behind this is that if a build fails (i.e pushing your code to main) your webpage is still up and not taken down.

[@yazmatazz01]

Note that Jekyll at 1:47 should be jekyll

[@deadbeef-ei3ic]

Thank you, was stuck there

[@Iron_Condorr]

An updated version of this would be useful.

[@pablobrugarolas9323]

awesome tutorial, 100x thanks

[@debadritatalapatra5888]

Thanks for the awesome tutorial! Can I connect a back-end code to any of the front-end pages of al-folio? As in, run a code in the back-end and show a simple pictorial demonstration in the front-end?

[@propoop6991]

idk exactly what you want but i would use something like NextJS for more complicated stuff like that

[@AbubakarUsman-y8z]

"Thank you so much for the great content. My question is, when I deploy it on GitHub, later, if I want to make changes, should I just make the changes on my local machine and deploy it again? Will the changes be integrated, or is there something else that needs to be done?

[@calebd8495]

Running into a libv8 mini_racer error. Syntax of gem 'wdm', '>= 0.1.0' matches yours. Bundle install gives mini_racer was resolved to 0.6.3 which depends on libv8 node. Appreciate any guidance you can provide. Great video

[@SpencerPaoHere]

Interesting. Can you provide the steps on replicating that error? (I am definitley not encountering that)

[@cristoball5403]

@@SpencerPaoHere Hello! I have exactly the same problem, I followed the steps as in your video and I got the error. I am using ruby 3.1.0, jekyll 4.2.2 and gem 3.3.7 EDIT: Also, I am on windows 10

[@michaelkimnguyen]

@@SpencerPaoHere Also ran into this issue. When I tried to run bundle install, it failed to download libv8-node and I can't serve the website since it can't find the gem 'mini-racer'. Using Ruby 3.1.22p20 and Jekyll 4.2.2.

[@SpencerPaoHere]

Okay. I am on a windows machine (windows 11) It looks like it might be a ruby versioning issue. I have ruby 2.7.5p203 (when I run ruby -v) And my local gems for jekyll is (4.2.2, 4.2.1) when I run gem list jekyll. Hope this helps!

[@cristoball5403]

@@SpencerPaoHere by any chance do you have an idea of how to fix it by maintaining the ruby 3.1.XY version?

[@deadbeef-ei3ic]

Running into an issue. I follow your process and get to the point where you 'bundle install' and 'bundle exec jekyll serve'. All goes good but the locally hosted website isnt updated with my changes? I change my name, commited and pushed (verified it on my github) and its still the default confg.xml or splash page. Awesome video btw!

[@rogueconomist]

Has anyone been able to successfully deploy this? This is way more complicated than it should be

[@anandtandon6489]

yeah holy shit man ive been at this for hours

[@wenxie2527]

nice work! thanks

[@ClaraL27]

hi spencer, I have a weird problem with the Deploy step. When I try to run bin/deploy --user, nothing happens except a windows popup comes up asking which application I want to run

[@SpencerPaoHere]

Hmm What type of OS are you using? I am not familiar with that issue.

[@ClaraL27]

@@SpencerPaoHere thanks for the reply! Windows 11 Pro for Workstations, version 22H2

[@SpencerPaoHere]

@@ClaraL27 I think I had that issue before. What type of terminal were you using? I think anaconda throws that weird windows issue. Try either Powershell or the terminal within your IDE (I.e Visual studio)

[@ClaraL27]

@@SpencerPaoHere for other people if they encounter this issue -- I was actually using Powershell instead of gitbash for terminal, using git bash (literally step one lol) solved my problem! Thanks so much for the great step by step video, Spencer!! Much appreciated!!

[@pablopudding3693]

Thank you so much for this tutorial. This saved me a lot of time.

[@kevinkuriakose874]

hi, I'm quite new to git, and so I have been following your video for days on end to get my website up, but to no avail. So I am on a mac system, and while my site looks fantastic locally, works fine, all the links and everything is working fine, when I deploy it I am only getting the first page that too like an html, devoid of any of the formatting. Could you please suggest what I can do? I am not even getting any errors in deployment either (line to line just like yours).

[@SpencerPaoHere]

Hello! What was the specific error that popped up? It might be a configuration issue.

[@marcobarberomota1671]

Hey Spencer. Weird stuff going on with a deplyment that I got workign usign your step by step procedure. It seems like the copyrigth bar at the bottom overlaps with the text as you scroll. Also there seems to be errors 404 in all sublinks other than the about main page of the website... Any solution to this? I can provide with the website link and the github project. thanks

[@SpencerPaoHere]

Hmm not sure. Have you tried zooming out? Though, I think the creator of the website blueprint has it so that the dimensions adjust depending on what screen you use. Feel free to provide website url.

[@claudiap2298]

Doesn't look that is actually you talking😟

[@jeffng50]

just some desync man don't think too much, it was 2 years ago so AI ain't that good

[@0xnull-r2t]

​@@jeffng50lol

[@MFTAQ]

I have a paid hosting plan (orangehost) already, will Jekyll work with it?

[@SpencerPaoHere]

I am not familiar with orangehost, but you can integrate Jekyll with many other hosts!

[@shopvictor]

I'm not as lucky as you ... went all the way to the final step, on Github pages / Actions. but hit this Workflow error and no clue how to fix it. Everything works fine on my local Mac.. assets/jupyter-monokai.css 119ms (unchanged) assets/jupyter.css 11ms (unchanged) Error: assets/main.scss: SyntaxError: CssSyntaxError: Unknown word (7:24) Error: 5 | Error: 6 | // Dimensions Error: > 7 | $max-content-width: {{ site.max_width }}; Error: | ^ Error: 8 | Error: 9 | @import Error: 10 | "variables", assets/scholar-icons.css 13ms (unchanged)

[@postnatalmotcoach1006]

hi I was asked to Create a PHP Laravel MPV website with a basic function. i typically have been using templates up until now but want to understand GitHub , its uses and how I can move forward learning more about development . is this a good place to start? I also need to price out the job. where can I start with this .

[@SpencerPaoHere]

This a good place to start! You can a look at how the webpages are developed on the Gitpages on sort of how it’ll work. In terms of pricing, you can think of it in terms of how much are you willing to charge for the entire project (fixed cost) or by hourly.

[@klarachura6942]

This is probably just me struggling with Git in general, but when I run the final bin/deploy script, it tries to push to the alshedivat repo and not mine. I followed all the steps in the video, excluding the Windows-specific steps since I am on Linux. Where might I be going wrong?

[@SpencerPaoHere]

Have you forked the repository ? That might be why you are receiving those issues.

[@rahuldass452]

Hi, I'm getting a similar issue as well. I bookmarked your video as the steps you've outlined worked flawlessly on an older machine but I wanted to update my website from another machine and after forking the repo and following the same steps, not only are my commits getting pushed to the alshedivat repo but the build is failing due to a permissions issue with github actions. I suspect it has something to do with github's token authentication vs. user/password combo. Any suggestions?

[@SpencerPaoHere]

​@@rahuldass452 Weird. The permissions issue may be related to a different machine. Are you using the same tokens / created a different token from git to local?

[@rahuldass452]

@@SpencerPaoHere I had to create a new token since I'm using a new machine in order to authenticate myself. I know this is a silly novice question, but any chance you could do a video (or point me in the right direction) where let's say I've created my al-folio website using one machine, how would I continue the project say from another machine? I tried doing a git clone of my site onto my new machine but none of the build files were present, like most of the _, gemfile, etc. Any advice?

[@SpencerPaoHere]

@@rahuldass452 Well, the issue your are coming across should not be an issue. All you need to do is to work out of the same branch that your website is on. And, when you deploy, it should be the branch you are working out of since your website is based on the master branch.

[@GeorgeSun-v2w]

I followed you steps, but I can only see pictures on the website only on full screen, i'm wondering if you know why is it

[@SpencerPaoHere]

Hmm. I'm not sure. Though this might be a solution? github.com/alshedivat/al-folio/issues/537

[@jennysun926]

Would you try to fork the repo again and deploy? I've tried 100 times, and it doesn't work anymore. Thanks!

[@SpencerPaoHere]

Works like a charm. Have you tried creating an Issue request on the original repo? They might be able to help further. Else, what's your error?

[@henryodegaard3189]

Whenever I try to fork and rename the website to my username github io link, it doesnt publish a website. When I try to pull it, edit it, and then push it, it has worked once but it doesn't work now ever. I've been trying it for a year and I cant figure it out. Even if it does publish the site, I cant edit it later. Where do i push the changes to? master? gh-pages? source? i'm so confused.

[@SpencerPaoHere]

Hi! The way that this repo is set up is that you edit on your source branch and push to source -- you will then automatically switch to main after the git actions. You might have to stash your current changes, revert to your most recent working commit code, pop the changes in and repush. (Ensure that you are doing this on your source branch since when you deploy, you will go to the master branch)

[@henryodegaard3189]

@@SpencerPaoHere Thanks! Finally figured it out after years of trying and my site is up! You're awesome.

[@Anistuffs]

Is there a way to change where gem is installed in Windows 10 ??? Even though during the Ruby installation, I choose a folder without spaces, as it tells me to, gem keeps installing in a folder under my username which has a space in it. And then gem just fails to install jekyll because it's running from a path with a space in it. I just can't seem to find a way to not have gem install inside a folder under my username.

[@SpencerPaoHere]

Hmm. Now that I’m not exactly sure - when you download gem can you specify the folder directory ? You could perhaps manually move it a- also ensure that anything pointing to the executable is changed as well to whichever address you shift the files to.

[@alisopla3493]

great job dear, but i can't find the config.yml file

[@SpencerPaoHere]

I am assuming you are attempting to use the al-folio template? If so, have you checked out what branch you are on? Go to the source branch. There you will see _config.yml at root. (The config file is not on master.)

[@alisopla3493]

@@SpencerPaoHerethat's was helpful, thank you best regards...

[@Alpha-Omega33]

So I am using Mac and i did it all on the command line but I don't use Atom. I have visual studio code and when I uploaded the rep there it didn't look like in your Atom program. I don't know where I am missing it

[@SpencerPaoHere]

You don't have to use atom for the CLI stuff. I did notice that via VS, sometimes the editor can be a bit wonky. A work around can be via the Git bash terminal.

[@MULLAIVENDANK]

what is config.yml . where to get that file

[@N.eg93]

I have same issue , many files are missed from the original repo not the same in the video

[@Amin_Code]

actually the full name of the file is "_config.yml". hope you find it!

[@reginaldodrPURO]

I could carry out all the instruction and get my webpage on github. But, when I modify my repository and try to deploy it again, all my .md files vanishes from my local repo. So I can't update my webpage. How can we update the changes?

[@SpencerPaoHere]

You have to make the edits on local branch and republish (switch branches)

[@Turnpost2552]

@@SpencerPaoHere ahhhh f tht

[@luoluo_ai]

Run ridk install on the last stage of the installation wizard (this installs gem) i did everything in step two but not this and when I wrote bundle exec serve staff it went wrong. What does this thing above mean and how should I do this on my macbook. Thanks for your answer!

[@SpencerPaoHere]

The bundle exec runs the gemfile. You may need to install ruby for MacOS. That may solve your issue. I think brew install ruby should work. (after a quick google search) Otherwise, I unfortunatley am not sure on mac related issues. Though, you can post an issue on the github issues of the original project.

[@luoluo_ai]

@@SpencerPaoHere I have 3.1.2p20 version ruby installed but it's still wrong(Failed to open TCP connection to medium.com:443). Thank you anyway!

[@mspfishaks0827]

Hi, thank you for this tutorial! How can I edit my webpage after deployment? (It seems like _pages/about.md and other files have been deleted from the master branch)

[@SpencerPaoHere]

Try switching to the source branch, make your edits, and then redeploy.

[@bagzhansadvakassov1093]

Deep voice. Nice apartment btw.

[@bristowsoundsgood]

I followed everything here. When I try to deploy using Github Actions, I get an error to do with WDM. Saying it's not supported on my system, but I'm running Windows 11.

[@bristowsoundsgood]

Might be useful for someone.. I got Al-Folio working by removing the gem 'wdm' line from my Gemfile and replacing it with gem 'listen'. Then I made a new branch in git (named gh-pages) and pushed it to my repository. After that I went to my repo's settings --> pages tab. Selected the 'deploy from branch' source and the page deployment worked fine. I was having problems with the bin/deploy --user stage, so creating my own branch and pushing it to github as well as using listen instead of WDM managed to avoid all issues

[@amlecciones]

what window is that with the MINGW64:/c/Users [...] is that Terminal (Admin)? ....... very unclear instructions.

[@SpencerPaoHere]

Can you provide a time stamp ? I believe that terminal may be git bash.

[@isaaczhu6314]

Hi I got a werid error message after I deployed my page. My page works perfect on locally. Here is the message I got: deploy crash with Liquid Exception: Zero vectors can not be normalized in /REPO/_layout/post.html .Do you know what is going on? thanks

[@SpencerPaoHere]

If your local works fine and your deployed does not, there is probably a mismatch between your two environments. Could you push your changes to the main branch and redeploy? Regarding the error, I am not sure the cause. It might be useful to post on the original github bug tab.

[@isaaczhu6314]

@@SpencerPaoHere Hi, thank you for your reply. I fixed the problem. Now I have a new question, How can I edit my webpage after deployment? (It seems like _pages/about.md and other files that I can edit are only in my master branch, not gh-pages branch. The live website is not changing after I commit to the master branch. Thanks a lot!

[@SpencerPaoHere]

@@isaaczhu6314 Nice! What was the solution to your previous problem? Regarding how to edit webpage after deployment, you have to edit your source branch and redeploy.

[@adeelahsaanawan]

Hey, deploy.yml looks different (as it uses pip3 etc) than the one you are using, can you share your deploy.yml file?

[@SpencerPaoHere]

Here's the github for code! github.com/SpencerPao/spencerpao.github.io

[@larryhatcher8927]

I'm at the start of this video. Ruby 3.2.2, gem 3.4.18, Jekyll 4.3.2 were higher. I'm going to assume that this is okay

[@amoiiir]

is it still running okay for you? is it hard to configure?

[@thefosscellist]

Hi there! When I try to execute bin/deploy, my terminal will ask me for my github credentials and then complain. Any idea how to fix this?

[@SpencerPaoHere]

Hi! Did you get the SSH keys from your github account and store in your local setup?

[@hohyunyoon7167]

@@SpencerPaoHere Hi! I had the same issue. Could you help?

[@MehdiMehdi-bd8fw]

Great explanations, Thanks. after running /bin/deploy --user I've got "GitHub Metadata: Error processing value 'baseurl':" and "No repo name found". Can you please help me on this issue.

[@SpencerPaoHere]

hmm yeah. that is raelly weird. What's your branch name? I have not seen that issue. I'd probably recommend posting a github issues on the page.

[@MehdiMehdi-bd8fw]

When it's deploying, I can see in the screen that source branch: master, deploy branch: gh-pages, it should be the other way, No?

[@SpencerPaoHere]

@@MehdiMehdi-bd8fw Try to deploy under source branch (might need to revert your previously pushed changes)

[@MehdiMehdi-bd8fw]

@@SpencerPaoHere I am new in GIT can you please explain me how to revers the push changes.

[@SpencerPaoHere]

@@MehdiMehdi-bd8fw git logs git reset --hard Where your HASH Key is where you want to revert your head to.

[@salman_3833]

i keep getting 404 page when accessing my url? i'm not sure what i'm doing wrong

[@SpencerPaoHere]

404 means that the link is not valid. Something may have gone wrong either in the deployment or the configuration with github pages on github

[@rutvikjoshi113]

Hii how can I add background music to my GitHub page

[@SpencerPaoHere]

Yes you absolutely can. You have to link the html tag to the downloaded music file when deploying the webpage.

[@christospapoutsellis]

Hi, can you please share your deploy.yml file?

[@SpencerPaoHere]

Try checking out the source branch on GitHub. (Al folio) after you pull from original source

[@cleisonarmandomanriqueagui9176]

Can't load WDM! (LoadError) on windows while deploying Last update EVERYTHING WORK WITH YOUR some corrections in url and base url

[@arc8218]

bro sound like ceo

[@TheTanmaybishnoi]

bundle install says no gemfile.lock available

[@SpencerPaoHere]

You might need the gemfile to be in the same directory as your executable (bundle install XXXX)

[@jacobw.3110]

Commenting from two years later -- nice tutorial, bad template reference: this template is not very robust. If you are new to github page making, this is going to lead you down a deep rabbit hole where you'll end up search -> fix bug -> search -> for a long while. Caution.

[@jadmoawad7512]

Am i the only person who could not find the file _config.yml after cloning ?

[@AbubakarUsman-y8z]

hahhaha it happened to me, but got it finallly

[@Euphemia-em8fe]

@@AbubakarUsman-y8z I still can't find it after cloning, can you tell me what you did to find it?

[@Euphemia-em8fe]

hey did you find config.yml?

[@jadmoawad7512]

I did not@@Euphemia-em8fe

[@karolinasylwester1351]

check out the source branch not master, it's on source@@Euphemia-em8fe

[@ndrcrypto]

How to switch the website to dark mode

[@SpencerPaoHere]

Try clicking on the moon shaped object of your website. (top right hand corner of the any page)

[@ndrcrypto]

@@SpencerPaoHere thanks but I don't get this button

[@RyanMcVicker-g3z]

RIP ATOM

[@MackTio-g4k]

Maritza Trail

[@glyxonbiolabs239]

a bit too fast and does not explain how to add images or different sections. Assumes everyone is a programmer...

[@cristoball5403]

most of those features are explained in the code itself, the objective of the video is to build the website, not to explain the further edition

[@alexislozano5125]

Hey Spencer, when I try to run "bundle exec jekyll serve" I get this error: "var/lib/gems/3.1.0/gems/jekyll-4.3.2/lib/jekyll/external.rb:57:in `require': no implicit conversion of nil into String (TypeError)" all gems are installed, everything is up to date, and I have tried all chatgpt suggestions. Regardless problem persists, any ideas? Thank you.

[@SpencerPaoHere]

What's your versions? for reference: 1:56)

[@weefunkster]

Nice tut but ewwww WSL, just use ubuntu

[@SpencerPaoHere]

😂😂😂bruh LOL

[@weefunkster]

@@SpencerPaoHere No excuses Spencer, Steam Proton, Google Docs/sheets, Fucking **Photopea**. Native dev environments, WINE! Get those wonky stabilizers off and see you on the other side big lad. Stars in your eyes kid, stars in your eyes.

[@satyamverma4726]

------------------------------------------------ Jekyll 4.3.1 Please append `--trace` to the `build` command for any additional information or backtrace. ------------------------------------------------ C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:39:in `exec': SyntaxError: Expected identifier, string or number (ExecJS::RuntimeError) from C:/Ruby31-x64/lib/ruby/gems/3.1.0/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:14:in `initialize Can you help me with this error? This happens after running the command ; bin/deploy --user

[@SpencerPaoHere]

This looks familiar! Check out this bug post on al-folio. github.com/alshedivat/al-folio/issues/691

[@voscillate4718]

​@@SpencerPaoHere I tried to follow the website to fix this issue but nothing worked. How do you suggest I fix it?

[@SpencerPaoHere]

@@voscillate4718 If nothing in those comments underneath the bug post worked, I'm not sure how I can help much more :/ Have you thought about posting a follow up? It seems that the issue has been resolved otherwise.

[@angelgonzalomaytacoaguila7923]

Hi, I'm facing the same error. Could you fix it?