Copyright 2018 Dean Attali
Beautiful Jekyll is a ready-to-use template to help you create an awesome website quickly. Perfect for personal sites, blogs, or simple project websites. Check out a demo of what you'll get after just two minutes. You can also look at my personal website to see it in use, or see examples of websites other people created using this theme here.
If you enjoy this theme, please consider supporting me for developing and maintaining this template.
- Prerequisites
- Build your website in 3 steps
- Add your own content
- Last important thing: YAML front matter ("parameters" for a page)
- Final but Important Steps
- You need to have a GitHub account. If you don't have one, sign up here - it takes one minute. This is where your website will live - if you sign up with username
derek
then your website will behttps://derek.github.io
. - It would be helpful to understand what Markdown is and how to write it. Markdown is just a way to take a piece of text and format it to look a little nicer. For example, this whole instruction set that you're reading is written in markdown - it's just text with some words being bold/larger/italicized/etc. I recommend taking 5 minutes to learn markdown with this amazingly easy yet useful tutorial.
Getting started is literally as easy as 1-2-3 ๐ Scroll down to see the steps involved, but here is a 40-second video just as a reference as you work through the steps.
(Assuming you are on this page and logged into GitHub) Fork this repository by clicking the Fork button on the top right corner. Forking means that you now copied this whole project and all the files into your account.
This will create a GitHub User page ready with the Beautiful Jekyll template that will be available at https://<yourusername>.github.io
within a couple minutes. To do this, click on Settings at the top (the cog icon) and there you'll have an option to rename.
Edit the _config.yml
file to change all the settings to reflect your site. To edit the file, click on it and then click on the pencil icon (watch the video tutorial above if you're confused). The settings in the file are fairly self-explanatory and I added comments inside the file to help you further. Any line that begins with a pound sign (#
) is a comment, and the rest of the lines are actual settings.
Another way to edit the config file (or any other file) is to use prose.io, which is just a simple interface to allow you to more intuitively edit files or add new files to your project.
After you save your changes to the config file (by clicking on Commit changes as the video tutorial shows), your website should be ready in a minute or two at https://<yourusername>.github.io
. Every time you make a change to any file, your website will get rebuilt and should be updated in about a minute or so.
You can now visit your shiny new website, which will be seeded with several sample blog posts and a couple other pages. Your website is at https://<yourusername>.github.io
(replace <yourusername>
with your user name). Do not add www
to the URL - it will not work!
Note: The video above goes through the setup for a user with username daattalitest
. I only edited one setting in the _config.yml
file in the video, but you should actually go through the rest of the settings as well. Don't be lazy, go through all the settings :)
To add pages to your site, you can either write a markdown file (.md
) or you can write an HTML file directly. It is much easier to write markdown than HTML, so I suggest you do that (use the tutorial I mentioned above if you need to learn markdown). You can look at some files on this site to get an idea of how to write markdown. To look at existing files, click on any file that ends in .md
, for example aboutme.md
. On the next page you can see some nicely formatted text (there is a word in bold, a link, bullet points), and if you click on the pencil icon to edit the file, you will see the markdown that generated the pretty text. Very easy!
In contrast, look at index.html
. That's how your write HTML - not as pretty. So stick with markdown if you don't know HTML.
Any file that you add inside the _posts
directory will be treated as a blog entry. You can look at the existing files there to get an idea of how to write blog posts. After you successfully add your own post, you can delete the existing files inside _posts
to remove the sample posts, as those are just demo posts to help you learn.
As mentioned previously, you can use prose.io to add or edit files instead of doing it directly on GitHub, it can be a little easier that way.
- In the repository there is a file
Contributors.md
. - You need to simply add your
username
and your github page link adjacent to it and create a pull request. (Make sure you're ading only two fields in thecontributors.md
file) - We'll be accepting your pull request as soon as possible!
You've successfully made a beautiful looking website for yourself and have learnt Git and GitHub upto a good level.