How to easily create a static website
This is a beginner-friendly tutorial that outlines the steps that I followed to create this website. It’s beginner-friendly because this is my very first website 💫
Requirements
- Have a code editor installed, I use VS Code found here
- Install Ruby following this video
- In Vs Code enable the Ruby extension
Website set up
- Search for Jekyll templates. You can find free ones here. I selected Mediumish Jekyll theme.
- You can either fork the repo on github or download the template. If forking: change the name of the repository, this should be your websites name (it will appear on the URL). Then clone the repo to work with it locally. If downloading: download and unzip the folder. Create a repository on Github and upload the files to this repo.
- The files can be edited directly on GitHub by selecting them, then pressing the pen button to edit. To edit locally, open your text editor after the repo is cloned.
- Open a terminal from the root of your folder and type the following:
Â
gem install bundler
bundle install
I ran into some errors which were resolved by running:
bundle update
bundle add webrick
-
To view the website locally type:
bundle exec jekyll serve
Then follow the address provided in your browser.
Editing the content of the website
- Start by opening the
_config.yml
file, edit the info under each of the headings. - In the
_posts
folder, there are examples of how you can post your content. The files in this folder should be named in this format: yyyy-mm-dd-name-of-post - In the
_pages
folder theabout.md
file should be changed, this will appear on the ‘about’ page. - Explore the files and folders to see what can be edited, for me this took some trial and error. To enable more features (such as Google Analytics, MailChimp mailing lists, Disqus) on your website visit https://bootstrapstarter.com/template-mediumish-bootstrap-jekyll/
- Remember to save and push all of your changes to Github.
Viewing your website
- Github: in your repository go to ‘settings’ in the top menu. Then select pages from the menu on the left. under ‘Source’ select
Branch: main
then click ‘save’. A message will appear saying ’Your site is ready to be published at https://your_github_name.github.io/repo_name/’ - Your site can also be hosted on Netlify. Create a free account and follow the instructions to launch your website.
Have fun building your own website :)