There are many articles about using GitHub Pages to create a blog site, and it has a long history. However, many of them are already inconsistent with the current GitHub. If you click on the picture, you will find that the donkey’s lips do not match the horse’s mouth.
What’s even more troublesome is that you will find that you may need to enter many incomprehensible commands, or you may need to be familiar with Git.
Do you like wacky commands? I don’t like it anyway.
This allows you to complete the creation and maintenance of the entire site on a pure Web page without a single command.
1. Apply for a GitHub account
I won’t introduce this step, just do it yourself.
2. Create a dedicated repository for your blog site
In the upper right corner of your GitHub page, click the New + button and select the first New repository in the pop-up menu.
After confirmation, you will enter the page to create warehousing details. Two things need to be noted here:
- Repository name, this name must be unique under your account.
- Be sure to check Initialize this repository with README
After clicking Create repository, wait a moment, your repository has been successfully created, and you will return to the project homepage.
3. Enable Pages
Click Setting to enter the repository settings page. See picture above.
There is a lot to set up, and we only need to care about GitHub Pages. We go down to find the GitHub Pages configuration section.
Here, you need to enable GitHub Pages. The comments make it clear that currently GitHub Pages is disabled and you need to select a branch to enable it.
It’s easy to do, click the None drop-down button, select the master branch we already have, and click Save.
You will see a prompt in the GitHub Pages configuration section saying that your site is accessible.
4. Choose your theme
Although in theory, you can already start creating pages. However, good looks are always necessary, just in case you are not familiar with CSS.
We choose a theme.
Click the Choose a theme button below in the GitHub Pages configuration section to enter a theme selection page. At the top of the page is a horizontal theme list for you to choose from.
I picked the Architect theme. If you don’t find it, you can click on the next screen on the right to choose it.
Click Select theme to confirm your selected theme.
You will see that GitHub has replaced the original README.md for you. You don’t need to edit it now, just take a look.
Remember your site address? It is the one listed above: https://haoguanjun.github.io/myblog/. Re-open this address and you should be able to see the README.md page generated by default.
Looks pretty good.
5. Create the first blog page
For programmers, there is always a Hello, world. We create a helloworld page as the first page.
Go back to your project homepage and find the Create new file button.
After clicking, you will enter the process page of creating a new file, which is our own first page.
We need to save this page to the _posts folder as 2017-08-25-hello.md. The format of the file name is specified and must be in the format of: four-digit year-two-digit month-two-digit date-name.extension, otherwise it will not be processed.
.md means you are going to use markdown syntax.
You cannot create this _posts folder directly, you need to create it during the file creation process.
Now enter the name of the folder _posts in the input box, and then enter the separator / . You will see that the folder is already there and you can enter the file name.
Continue to enter 2017-08-25-hello.md. After entering, as shown below, you can enter the file content.
In the file content input area below, enter the following content.
Note that the three hyphens must be on the first line.
Then, go to the bottom of the page and submit the page.
You are done!
You should see a page like this, with our first file saved in the _posts folder.
6. Browse the first blog page
Now, you also need to enter the address of this page in the address bar, and then you can see your first page. The address is: https://haoguanjun.github.io/myblog/2017/08/25/hello.html
You must have noticed that this address is not the file path we created. Year, month, day and hello have been separated, and the file extension has been changed from .md to .html.
Congratulations, you have successfully created your blog site and created your first page.
7. Add links to the homepage
We can’t enter the link to this page every time.
On the homepage of the repository, find the automatically generated README.md file and click to enter the page of this file. It is also written using markdown.
On the web page, click the edit button in the upper right corner of the file to enter edit mode.
Under the title, add a line as a hyperlink, with the prompt text in square brackets and the hyperlink in parentheses.
## Welcome to GitHub Pages [Your first blog](https://haoguanjun.github.io/myblog/2017/08/25/hello.html)
Submit your changes and visit the homepage again. You will see that your article has appeared on the homepage.