preface
There are already many blogs on the market, such as CSDN, Nuggets, Blog Park, Jane Book and so on. We can post directly on it, and the interaction is human, and it can be retrieved by search engines. But it’s always someone else’s platform and it’s often limited, so we wanted to have our own blog. I had tried to build different types of blogs before, and after a lot of work, I decided to go Hexo + Github Pages. Today we will take you to build their own blog. Thanks to Hexo + Github Pages, they are all free, but require some hands-on skills!
Hexo profile
Hexo is a fast, concise, and efficient static blogging framework. Hexo uses Markdown (or other rendering engines) to parse articles and generate static web pages with beautiful themes in seconds. All you need to do is write your blog content with Markdown syntax, and with a simple command you can upload the generated page to Github, and everyone can visit your site. Convenient already oneself, also gave oneself a platform to show oneself achievement, whether kill two birds with one stone.
Set up steps
Before you install Hexo, you need to make sure you have Git and Node.js installed on your computer, so let’s take a look at how to prepare these environments.
Git
The installation
- Window: Download and install
- MacOS: Download and install
- Linux (Debian, Ubuntu):
sudo apt-get install git-core - Linux (Fedora, RedHat, CentOS):
sudo yum install git-core
Set up the
After installing git successfully, bind git to GitHub account, right-click git Bash, and set configuration information:
#Configure the user name and email addressGit config --global user.email git config --global user.emailCopy the codeFor example, my configuration is:
git config --global user.name "cunyu1943"
git config --global user.email "[email protected]"
Copy the codeTo generate an SSH key file, enter the following command and press Enter three times. Generally, the password is not required.
#Generating an SSH KeySsh-keygen -t rsa -c "Github registered email"Copy the codeMy command to generate the secret key:
ssh-keygen -t rsa -C "[email protected]"
Copy the code
Generally, two files id_rsa and id_rsa.pub are generated after executing the above command. The former is private and the latter is open to the public. Then find the id_rsa.pub key in the generated.ssh folder and copy the contents.
Then open the github-settings-keys page and create a new SSH key. Fill in the Title and key, and the contents of the key will be the contents of id_rsa.pub that we copied earlier. Finally, click Add SSH key.
Node. Js installed
The installation
Go to the official website to download the latest stable version of Node.js, which is generally recommended to be 64-bit. Installing node.js is as simple as clicking next. If you still don’t know how to install node.js on Windows, please refer to my other blog: Installing Node.js on Windows.
validation
After the installation is complete, to check whether the installation is successful, you can open the command prompt (Win + R), enter CMD to open the console, enter the following command, if the corresponding version number appears, it indicates that the installation is successful;
node -v
npm -v
Copy the code
Set up the
Because the download package is from a foreign server, so the speed is slow, so we recommend to use ali’s domestic mirror for setting;
npm config set registry https://registry.npm.taobao.org
Copy the codeHexo installation
Looking for a place on your hard drive, used to store your blog file, such as I was in D: personalFiles/lot/blog, this folder you can set according to his be fond of. Then from the command console into the current folder, the next is the installation process;
- First install Hexo
npm i hexo-cli -g
Copy the code
- Create a new folder for your blog, like mine
blogThen go to the folder and initialize and install the required components using the following command.
hexo init .
npm install
Copy the code
- After initialization, the directory structure is as follows.
. ├ ─ ─ _config. Yml # site configuration information ├ ─ ─ package. The json # application information ├ ─ ─ scaffolds # template folder ├ ─ ─ source # store user resources | ├ ─ ─ _drafts | └ ─ ─ ├ ── themes #Copy the code- Then enter the following command and open it in the browser
http://localhost:4000;
#A new blogHexo new "Blog name"#Generating static Web pages
hexo g
#Opening the local server
hexo s
Copy the codeThen you will see the following interface, but mine is modified, so it will be different from yours.
Github Personal repository
After completing the above steps, we will be able to preview our blog locally, but if we want to publish it online, we will have to use the Github Pages feature. Here is how to combine Hexo + Github Pages to push our blog to the web. Easy for everyone to visit anywhere!
First, you should have a GitHub account. If you don’t have one, go out and make a right turn to sign up for one.
After you have the account, create a new warehouse, and make sure your warehouse is public, you want to make a private, who can access it? Also, the name of the warehouse must be:
The user name. Making. IO
The user name. Making. IO
The user name. Making. IO
This username is recommended not to be too complicated, but to be personal, because when you ask someone to visit your blog, do so at https:// username.github. IO. For example, my username is cunyu1943, so my repository is cunyu1943.github. IO:
Deployment to making
After completing the above steps, you should be able to preview the site locally. The next step is to push the site to Github Pages, and then we can be accessed by others.
Just set the site configuration file _config.yml in the root directory of our blog to your personal repository name:
After completing the above steps, we can push our local content to the remote GitHub repository and access it in the browser by using the following commands:
https:// username.github. IO
For example, my blog Village Yuyao’s blog;
hexo clean
hexo g
hexo d
Copy the code
Gitee Personal Warehouse
As usual, you need a Gitee account first. If you don’t have one, go out and make a right turn to register an account first.
Then build a new warehouse, also need to pay attention to the following points:
- Make sure your warehouse is
public; - The repository name is your username, which is slightly different from Github and doesn’t need to be a username.
For example, my username is cunYU1943, so my warehouse name is cunyu1943.
Deployed to Gitee
After completing the above steps, you should be able to preview the site locally, and then push the site to Gitee Pages so that we can be accessed by others. It should be noted that Gitee Pages are not automatically updated like Github Pages. It requires you to update it after every push. If you want to update it automatically, you need to be a Member of Gitee.
Then you need to set the site configuration file _config.yml in the root directory of our blog to your personal repository name:
After completing the above steps, we can push our local content to the remote Gitee repository by using the following command, manually update Gitee Pages, and then access it in a browser:
https:// username.gizee.io
How to write a new blog and push it remotely
After following these steps, your blog should be set up and accessible at https:// username.github. IO. What if we’re going to post a new blog post? Here’s how to do it in detail.
- First go to the blog folder, then right-click into the console, with the following command to create a new post;
Hexo n "Blog title name"Copy the code
- Then, in
blog/source/_postsThere should be a Markdown file created with the title of the article.
- Then open the file and write whatever you want;
- Then use the following command on the console, push it to the remote GitHub repository, wait for a while, access to see the new post just pushed!
hexo g
hexo d
Copy the code
How to bind custom domain names
Github. IO is always a bit inconvenient to access. If we need our own personalized domain name, how should we set up? So before this, you need to have a good record of the domain name, if not, please go to Ali Cloud, Tencent cloud and other manufacturers to buy their own domain name, and then through the platform for the record, and then add two resolution records, take my Tencent cloud as an example:
After setting up the resolution, go to Github’s blog project, click Settings->Pages, add your domain name to the Custom Domain, and then Save. Then you can access your blog through your own domain.
If not, you can manually create a CNAME file in your local blog /source directory (no suffix) and save it with your domain name. Run the following commands to upload the Settings to Github
hexo g
hexo d
Copy the code
For example, if my domain name is cunyu1943.site, we can access my blog through cunyu1943.site.
beautify
After the setup above, we just end up with a simple blog. If you want to make your blog as cool as mine, you have to use themes. I used hexo-Theme-matery, a theme based on material design and responsive design. Moreover, there is a very detailed document on how to set it. If there is a problem, you can submit an issue in time, and the author can reply in time.
If you don’t want to make too much fuss, you can also use the source code of my blog and change the personal configuration of it after completing the above steps. The source address of my blog is hexo-theme-matery-personal
Download node_modules.zip, unzip it, and modify some of the configuration (your Github, username, etc.). Yml and _config.hexo-theme-matery.yml in the root directory, and then you can blog directly. That is, of course, if you have the environment and everything set up.
PS: I have hidden some key information in the configuration file, such as Gitalk, Gitment, Valine, baiduAnalytics, etc. You need to register and obtain your own information, please remember to modify, otherwise it may lead to failure.
conclusion
So far, our blog is completed, is not very simple, hurry to try it!
For the article is not clear, welcome to leave a message, I will see the first time to reply to you!