Building a Personal Blog with Jekyll + GitHub Pages

The blog is finally up and running. Writing a few posts to document the process, and as a test.

During the Spring Festival holiday I had nothing to do, and on a whim I signed up for a domain. After cooling down, I figured since I'd already paid for it, I might as well stick with it. 😓 Registering a Domain has various discount codes and supports Alipay — the best choice for beginners. Discount codes and related steps Creating a GitHub Page comes in two flavors: project pages and user pages. We're interested in user pages. Each account can only have one repository for a personal homepage, and the repository name must follow the special naming convention . You can access your personal homepage at . Creating a repository through the wizard is straightforward, and testing it works easily. However, the repository won't have a blog structure yet. Note that the content of a personal page lives on the master branch. Binding a Domain Use : register and add your domain. Reference: How to Build an Independent Blog Setting Up the Environment Many people recommend using , and there are many ready-made templates available, making it quite convenient. Installing Running Jekyll Navigate to the project directory and run: At this point, will listen for requests on port of . Open a browser and visit to see your page! Using jekyll Reference: Step by Step: Creating a Blog on GitHub Pages (5) Also: Build Your Own GitHub Pages Blog For site design, front-end developers are more experienced — borrowing a template is the fastest approach. The site template is available here. Notes on Environment Setup I later wanted to follow the official approach to set up the Jekyll environment, and it took a bit of research to get it working. Adding Code Highlighting Install offers more than ten highlight style options. You can view all available styles as follows: Run the following command in the project directory, where can be replaced with or . If this doesn't run, check whether contains the Python directory . Modify : Social Comments In the end I went with , which now supports Chinese. Enabling Pagination First, enable pagination in Jekyll by adding the following to : Using Pagination Simply enabling pagination isn't enough — we need to actually use it on the homepage. Add the following code to your homepage (): {% raw %} {% endraw %} With this, will paginate based on . As many pages as are generated, that many page files will be created. Posts 1–5 will appear on , posts 6–10 on , and so on. Page Navigation Pagination alone isn't enough — we also need navigation between pages, which uses some additional attributes. First, check the total number of pages. If there's only one page, pagination is unnecessary. Use the attribute of : {% raw %} {% endraw %} We need a "Previous Page" button that doesn't appear on the first page. Use 's attribute to determine if we're on the first page, and to output the previous page path. Remember to prepend and perform any necessary character substitutions: {% raw %} {% endraw %} Next, generate buttons for all pages and disable the button for the current page. Iterate over all pages, use 's attribute to identify the current page — if it's the current page, the button is disabled; otherwise use {% raw %}{% endraw %} to replace with the current page number and generate the page path: {% raw %} {% endraw %} Finally, generate a "Next Page" button that doesn't appear on the last page. Similar to the "Previous Page" button, use 's to determine if there is a next page: {% raw %} {% endraw %}