Set up my website in Github Page using Jekyll (both remote and local).
I used to write some posts on Wordpress.com. It is a very user-friendly platform, a good start point. However, it is not well supported for markdown and the built-in editor is not very convienient, especially for some markdown format. For now, I do not want to host my website on any commercial server that I can use Wordpress.org. Thus, I decided to host website on Github Page which is a free platform. I can also use Jekyll for this blog static website.
Folk a template
To start, I folked the Github repo from Minimal Mistakes. It has a beautiful web design and several theme options. Moreover, the documentation is well written. Please check out it’s repository.
Change user settings
After folk, change the repo name to USERNAME.github.io and change some information in the _config_yml file.
I noticed a line github : [metadata] may be required to avoid Github meta data warning when you build Jekyll locally.
Install Jekyll locally
You don’t have to build the website locally, but it’s a good practice. Besides, you don’t need to push every time to see your website chagne.
Jekyll is built on Ruby, at least on my Windows 10, Ruby is not installed.
- Install Ruby for windows.
- Install Jekyll from Git Bash, following it’s installation manual.
Now you are good to go.
Clone the Github repository
After setting up the environment, you can simply clone the repo on your local computer. I found the Github Desktop is much easier than the command line (for more complicated need you may want to check GitKraken).
Add your posts and pages
To add your post/pages, you need to create a directory called _posts and _pages. Pages is better for content that not change so often, like About me page.
Add images or other documents
To add some images, you can either host on Imgur or create a directory called images under assets. assets contains all other file contents, include jpg, pdf and many more. Also, I upload a copy of my CV in the directory too.
You can also check out my Github repo to see how my website is organized.
Build website locally
To preview your website before push remotely to Github, you will need to run two Jekyll commands. But you do need to upload your image or pdf in order to see the change.
# If you just want to see the html file
bundle exec jekyll build
# To run the serve locally
bundle exec jekyll serve
The use of bundle exec will help to avoid version difference that you may encounter.
This post also helped me a lot to get started, many thanks!