Faatimah
Faatimah Data + Plant Scientist.

How to easily create a static website

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

  1. Have a code editor installed, I use VS Code found here
  2. Install Ruby following this video
  3. In Vs Code enable the Ruby extension

Website set up

  1. Search for Jekyll templates. You can find free ones here. I selected Mediumish Jekyll theme.
  2. 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.
  3. 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.
  4. 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

  5. To view the website locally type:

    bundle exec jekyll serve

    Then follow the address provided in your browser.

Editing the content of the website

  1. Start by opening the _config.yml file, edit the info under each of the headings.
  2. 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
  3. In the _pages folder the about.md file should be changed, this will appear on the ‘about’ page.
  4. 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/
  5. Remember to save and push all of your changes to Github.

Viewing your website

  1. 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/’
  2. 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 :)

comments powered by Disqus