163 lines
8.3 KiB
HTML
163 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>2022 Week 38 How to create a static website with Jekyll and deploy it on GitHubPages</title>
|
|
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
|
|
<link rel="stylesheet" href="/website/assets/css/blog.css">
|
|
</head>
|
|
<body>
|
|
<div id="navbarTop" class="w3-bar w3-top w3-black">
|
|
|
|
<a href="/website/index.html" class="w3-bar-item w3-button w3-hover-vivid-bluish-green">Home</a>
|
|
|
|
<a href="/website/about.html" class="w3-bar-item w3-button w3-hover-vivid-bluish-green">About</a>
|
|
|
|
<a href="/website/blog.html" class="w3-bar-item w3-button w3-hover-vivid-bluish-green">Blog</a>
|
|
|
|
|
|
<a href="https://github.com/WickedJack99" class="w3-bar-item w3-button w3-right"><i class='fa fa-github' style='color:#ffffff'></i></a>
|
|
|
|
<a href="https://www.linkedin.com/in/aaron-moser-027b30213/" class="w3-bar-item w3-button w3-right"><i class='fa fa-linkedin' style='color:#ffffff'></i></a>
|
|
|
|
<a href="https://www.youtube.com/channel/UCrplqbwwjjfGKXinuokR1HQ/featured" class="w3-bar-item w3-button w3-right"><i class='fa fa-youtube' style='color:#ffffff'></i></a>
|
|
|
|
<a href="amoser@stud.hs-offenburg.de" class="w3-bar-item w3-button w3-right"><i class='fa fa-envelope' style='color:#ffffff'></i></a>
|
|
|
|
<button class="w3-bar-item w3-button w3-right" type="submit"><i class="fa fa-search"></i></button>
|
|
<input class="w3-bar-item w3-input w3-right" type="text" placeholder="Search..">
|
|
</div>
|
|
<div class="mainDiv">
|
|
<h1>2022 Week 38 How to create a static website with Jekyll and deploy it on GitHubPages</h1>
|
|
<p>20 Sep 2022 - Aaron</p>
|
|
<div class="outerDiv">
|
|
<div id="prerequisits">
|
|
<h3>Prerequisits</h3>
|
|
Install <a href="https://git-scm.com/downloads" target="_blank">Git</a><br>
|
|
Install <a href="https://www.ruby-lang.org/en/documentation/installation/" target="_blank">Ruby</a><br>
|
|
Install Jekyll and Bundler<br>
|
|
<div class="console">
|
|
<code>$ gem install jekyll bundler</code>
|
|
</div>
|
|
</div>
|
|
<div id="github">
|
|
<h3>GitHub</h3>
|
|
Create a <a href="https://github.com/" target="_blank">GitHub-account</a><br>
|
|
Create a <a href="https://github.com/new" target="_blank">repository on GitHub</a><br>
|
|
(It has to be public if you use GitHub Free, note that your code will be visible to everyone!)<br>
|
|
</div>
|
|
<div id="repository">
|
|
<h3>Local Repository</h3>
|
|
Clone the repository to a local directory:<br>
|
|
<i>ssh</i><br>
|
|
<div class="console">
|
|
<code>$ git clone --recursive SSH_URL</code>
|
|
</div>
|
|
<i>https</i><br>
|
|
<div class="console">
|
|
<code>$ git -c http.sslVerify=false clone --recursive HTTPS_URL</code>
|
|
</div>
|
|
</div>
|
|
<div id="directories">
|
|
<h3>Directories</h3>
|
|
Create two directories: docs and localDev.
|
|
<div class="console">
|
|
<code>$ mkdir docs</code><br>
|
|
<code>$ mkdir localDev</code>
|
|
</div>
|
|
docs will contain the content of the website later on.<br>
|
|
localDev will contain our Jekyll project.<br>
|
|
</div>
|
|
<div id="createJekyllProject">
|
|
<h3>Create Jekyll Project</h3>
|
|
Move to the localDev-directory:<br>
|
|
<div class="console">
|
|
<code>$ cd localDev</code>
|
|
</div>
|
|
<br>
|
|
Create a new Jekyll-project at localDev-directory:<br>
|
|
<div class="console">
|
|
<code>$ jekyll new --skip-bundle .</code><br>
|
|
</div>
|
|
(make sure you got the dot)<br>
|
|
</div>
|
|
<div>
|
|
<h3>Edit Gemfile</h3>
|
|
Open the Gemfile that Jekyll created and comment out (#) the line which starts with <i>gem "jekyll"</i><br>
|
|
Add the github-pages gem by editing the line starting with # gem "github-pages".<br>
|
|
Change this line (# gem "github-pages") to:<br>
|
|
<i>gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins</i><br>
|
|
You can find the actual version of GitHub-pages <a href="https://rubygems.org/gems/github-pages" target="_blank">here</a>.<br>
|
|
Now save and close the Gemfile.<br>
|
|
</div>
|
|
<div>
|
|
<h3>Install bundle</h3>
|
|
Now still being at the localDev-directory, install the bundle:<br>
|
|
<div class="console">
|
|
<code>$ bundle install</code><br>
|
|
</div>
|
|
Optionally you can make changes at the <i>_config.yml</i> file.<br>
|
|
</div>
|
|
<div id="learnJekyll">
|
|
<h3>Learn Jekyll</h3>
|
|
Follow <a href="https://jekyllrb.com/docs/step-by-step/01-setup/#create-a-site" target="_blank">this</a> guide to learn Jekyll. Make sure that all files and directories you create are in the localDev-directory.<br>
|
|
Note that building locally will not work according to commenting out gem "Jekyll" at the Gemfile. (Atm I didn't check if this is right)<br>
|
|
If it is, you have to not comment it out and do bundle install again. Afterwards you can test locally with jekyll serve.
|
|
</div>
|
|
<div id="buildProject">
|
|
<h3>Build Project</h3>
|
|
After creating all necessary files and dirs, you can make a production build:<br>
|
|
Note that all files at _site will be cleared!
|
|
<div class="console">
|
|
<code>$ JEKYLL_ENV=production bundle exec jekyll build</code>
|
|
</div>
|
|
Your Jekyll-project was now build and stored at _site.<br>
|
|
Clear your docs-directory:
|
|
<div class="console">
|
|
<code>$ rm -r ../docs/*</code>
|
|
</div>
|
|
Now move the content of the localDev/_site to docs:<br>
|
|
<div class="console">
|
|
<code>$ cp -r _site/* ../docs</code>
|
|
</div>
|
|
And push your changes to your central GitHub-Repository.
|
|
</div>
|
|
<div id="publishWebsite">
|
|
<h3>Publish Website</h3>
|
|
Now <a href="https://github.com/WickedJack99/website/settings/pages" target="_blank">publish your repository on GitHub Pages</a>.<br>
|
|
Select your <i>branch</i> and as <i>folder /docs</i> and hit Save.<br>
|
|
Now you have to wait, this can take up to 10 minutes.<br>
|
|
On the top of the page a box will appear with the url of your website.
|
|
</div>
|
|
<div>
|
|
<h3>Happy developing!</h3>
|
|
</div>
|
|
<div id="sources">
|
|
<h3>Sources</h3>
|
|
<ul>
|
|
<li><a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll" target="_blank">https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/creating-a-github-pages-site-with-jekyll</a></li>
|
|
<li><a href="https://docs.github.com/en/pages/quickstart" target="_blank">https://docs.github.com/en/pages/quickstart</a></li>
|
|
<li><a href="https://docs.github.com/en/get-started/quickstart/set-up-git" target="_blank">https://docs.github.com/en/get-started/quickstart/set-up-git</a></li>
|
|
<li><a href="https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll" target="_blank">https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll</a></li>
|
|
<li><a href="https://jekyllrb.com/docs/structure/" target="_blank">https://jekyllrb.com/docs/structure/</a></li>
|
|
<li><a href="https://jekyllrb.com/docs/step-by-step/01-setup/" target="_blank">https://jekyllrb.com/docs/step-by-step/01-setup/</a></li>
|
|
<li><a href="https://jekyllrb.com/docs/step-by-step/10-deployment/" target="_blank">https://jekyllrb.com/docs/step-by-step/10-deployment/</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="navbarBottom" class="w3-bar w3-bottom w3-black">
|
|
|
|
<a href="/website/terms.html" class="w3-bar-item w3-button">Terms</a>
|
|
|
|
<a href="/website/privacy.html" class="w3-bar-item w3-button">Privacy</a>
|
|
|
|
<a href="/website/blog.html" class="w3-bar-item w3-button">Blog</a>
|
|
|
|
<a href="/website/imprint.html" class="w3-bar-item w3-button">Imprint</a>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |