Introduction#
I'm planning to start a blog to record some of the problems I encounter in my daily life, which can also be used for future reference and troubleshooting. Since that's the case, I need to consider how to create a blog. I had accounts on CSDN and Blog Garden when I was in college, but I only wrote a few things sporadically and left them there. I also bought a domain name and used WordPress on a VPS to build a blog, which ran for almost two years until I stopped after working for a year.The initial goal was to write some technical blogs, but as a student, in order to make a profit, it gradually turned into a movie resource download website, which brought in some income. During that time, I also learned some PHP to change the website template, which was a bit rewarding. After I started working, I didn't pay much attention to it anymore, and considering the copyright issues and the lack of help for personal growth, I shut it down. I felt a little reluctant at the time, after all, I built the site from scratch and operated it for so long. I rambled on so much just to say that I actually have some feelings for technical blogs, so I have the idea of starting my own blog and writing some technical articles.
Enough with the nonsense, let's get to the point.
This article was written on a Mac, but it should be similar for other operating systems.
Creating a Personal Site using Github Pages#
I think as a programmer, you should be familiar with GitHub. GitHub provides a feature called GitHub Pages, which allows us to create our own personal sites using GitHub pages.
Github Pages is a public static page hosting service open to users, organizations, and projects. Sites can be hosted for free on Github, and you can choose to use the default domain name provided by Github Pages or a custom domain name to publish your site.
- Log in to your GitHub account, click on the "+" sign in the upper right corner, and select "New repository" to create a new repository to store your website code.
- Fill in the repository name as required. If you want to use the default domain name github.io, the repository name should be your username according to the following naming rule: username.github.io. Then select "Public" and click "Create Repository" to create the repository.
Now we have a code repository on GitHub, and we can deploy our code there once we have finished writing it.
Installing Git#
The easiest way is to download and install it from the Git official website, or you can install it through the following methods:
Linux#
For Debian or Ubuntu Linux, you can directly install Git by running the command sudo apt-get install git.
Mac OS Installation#
Install Homebrew, and then install Git through Homebrew. Please refer to Homebrew's documentation for specific instructions: http://brew.sh/
Windows#
It is recommended to download it from the official website. After installation, you can check if it was successful by typing git version in the command line.
Building a Blog using Hexo#
- Install Node
Hexo is a static blog framework based on Node.js, so we need to install Node first.- Download the installation package from the Node official website and install it.
- Due to the Great Firewall in China, it may be difficult to access the official website or the access speed may be slow. It is recommended to install Node using Homebrew.
- In the bash command line, type
node -vto check if it is installed successfully.
- Install Hexo
After installing Node, we can use npm to install Hexo. Visit the Hexo official website for more information.
NPM is a package management tool that is installed along with NodeJS. It can solve many problems in deploying NodeJS code. Since the latest version of NodeJS already includes npm, it should already be installed. You can also test if it was successfully installed by typing "npm -v".
Execute the following command to install Hexo:
npm install hexo-cli -g #-g means global installation, npm installs it by default in the current project
Then execute:
hexo version
If the version number appears, it means the installation was successful. If there is an error, try installing using the following command:
npm install hexo --no-optional
Then use the following commands:
hexo init blog //execute the initialization command to the specified directory, here the directory is the hexo folder
cd blog
npm install
hexo generate //generate static web pages in the current directory
hexo server // start the local server
Enter http://localhost:4000 in your browser to see the effect. At this point, the generation of the Hexo static website is complete.
Deploying to Github#
Go to your blog directory and find the configuration file _config.yml. Modify the following information:
deploy:
type: git
repo: [email protected]:username/username.github.io.git
branch: master
Here, username is the username you registered on GitHub.
Now you can execute hexo d to deploy to GitHub. However, sometimes there may be problems. If you encounter the following error:
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.
It means that the remote repository cannot be connected to. Generally, you need to configure the SSH Key on your computer.
Why does GitHub need an SSH Key? Because GitHub needs to identify that the commits you push are indeed from you, not from someone else pretending to be you. Git supports the SSH protocol, so as long as GitHub knows your public key, it can confirm that only you can push.
Of course, GitHub allows you to add multiple keys. Suppose you have several computers, and you sometimes commit at work and sometimes at home. As long as you add the keys of each computer to GitHub, you can push to GitHub on each computer.
You can learn about the principle of SSH through an article by Ruan Yifeng:
http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html
You can refer to the GitHub official website's tutorial for configuring SSH Key:
https://help.github.com/articles/generating-an-ssh-key/
Once you have tested it step by step, you can use hexo d to deploy. After deployment, enter http://username.github.io/ in your browser to see the effect.