Oh, Github builds a personal blog site from 0 to 1 for free

Oh, Github builds a personal blog site from 0 to 1 for free

Xiaoshuai b learn the correct posture python's
friend said you want to build your own blog play before, so there is this:

Use wordpress to build your own blog site from 0 to 1

Later, some friends found it a little troublesome. They needed to set up the entire domain name of the server, and set up various PHP and Mysql environments. They just wanted to write an article and install an x. Can you not make so many bells and whistles?

Coincidentally, a long time ago I wrote a tutorial on how to build and use Github pages to host a static blog site. The aunt's towel-like model is the kind of:

目录
使用 Hexo 搭建个人网站

1. 开始搭建
2. 优化博客主题
3. 你的第一篇博客文章
4. 打上标签
5. 打上分类
6. 添加评论功能

让全世界的人都认识你

1. 创建 Github pages 仓库
2. 安装 hexo-deployer-git
3. 配置你的 Git
4. 推送你的网站到 Github 上
5. 访问你的网站
6. 完事，开启你的装x之旅

 还想要点个性？

1.购买域名
2.如何绑定域名
3.完事

Then I will share it with you next, I hope it will be helpful to you.

(Crazy hints at three companies)

Use Hexo framework to build personal website

In the past two days, I have reorganized my blog, because the Octopress framework I used before has been around for some years, and there are not many themes and plug-ins.
Later, I compared several frameworks and found that Hexo is good, similar to Octopress. You can also use Markdown to write articles and then generate static websites. Hexo has richer themes.
Hexo is based on nodejs and is very simple to build. So let's talk about how to start a personal blog with Hexo from 0.

Start building

1. Because hexo is based on the node framework, we first need to download and install node, the download address is: https://nodejs.cn/
2. After the installation is complete, we open the command window and enter node -v. If it returns as shown in the figure below, it means that you have successfully installed node.

node version

3. After the installation is successful, we run the following command in the command line window to install hexo:

npm install hexo-cli -g

4. Initialize the blog directory:

hexo init xxx.github.io (这里的xxx换成你自己的英文名)

5. After the initialization is complete, we enter our directory:

cd xxx.github.io

6. Installation

npm install

7. Clean it, and then generate a static page

hexo clean
hexo g

g is generate, meaning to generate

8. Get your website up and running

hexo s

s means server, which means running on the service

9. Open your browser and enter localhost:4000. Since then, your personal website has been built at such a speed!

hexo

Optimize the hexo blog theme

Go to your website directory and open the _config file. This file is used to configure your website information.

Here is my simple configuration, you can see this Hexo configuration document for details: https://hexo.io/docs/configuration.html

title: fxxkpython
subtitle: 小帅b
description: xx的个人博客，主要涉及到编程（Java，Python，Linux等），个人提升学习，视频教程
keywords: java，python，教程
author: wistbean
language: zh

Pick a Hexo theme

Does the newly built website feel a bit ugly, not in line with your pretty face? Anyway, I think so, so just choose a theme to decorate it. Here you can choose the theme you want. Know the hexo themes recommended by the respondent: https://www.zhihu.com/question/24422335

Download Hexo theme

Pick slowly. After choosing your theme, you can download the theme resources. For example, I choose a NEXT theme here to demonstrate, and enter the following command in your directory:

git clone https://github.com/iissnan/hexo-theme-next themes/next

The main thing here is to download the theme to our themes directory.

Configure the theme

After the theme is downloaded, in the _config.yml file in your root directory, modify the theme to your theme name:

theme: next

Rebuild and run

hexo g
hexo s

Have a visit and see, is it much better than before?

hexo next theme

The first article of the hexo blog, tagged and classified

You have dressed up your website beautifully, generously, concisely and attractively, then you have to write the content carefully, the content is important.

Two ways to create your blog post

Command form

Use the following command in your blog directory:

hexo new article （这里的article写上你的文章的名称）

After entering such a command, an article.md file will be generated under your source/_posts, under which you can write your blog content.
Use Markdown syntax to write.

Direct new method

The direct way is to create a new Markdown file directly in source/_posts. In fact, it is the same as the command form, but the command form is created using commands. It is recommended to use the command method, after all, Geek is a little bit.

Tag your articles

Tagging in your blog will make your articles easier to retrieve.
hexo open label function:

hexo new page tags

At this time, the tags/index.md file is generated under your source/, we open it, and then change it to:

type: "tags"
comments: false

At this time, if you want to tag your article, you can write in the head of the article:

tags:
    - Tag1
    - Tag2
    - Tag3

For example, the label of my current article is like this:

tags:
    - 个人网站
    - 教程
    - hexo
    - blog
    - Git
    - Nginx

Add categories to your articles

Classification and archiving are one of the characteristics of your blog. Divide articles into categories for easy viewing.
Turn on the hexo classification function:

hexo new page categories

Similarly, the categories/index.md file is generated in your source directory, we open it and change it to:

type: "categories"
comments: false

At this time, you can categorize and archive your articles. The way to use them is to add in the head of your article:

categories:
         - 分类1
         - 分类2

For example, the classification of my current article is like this:

categories:
    - 个人网站
    - 教程

Note: For tags and categories, make sure you have opened tag_dir: tags and category_dir: categories in your configuration file _config.yml. In addition, the grammar of Markdown is the most elegant, concise and simple to write. If you have not used it before, I suggest you learn the Markdown grammar description, generally you can master it in about an hour. Because it is as simple as HTML.

Add comments to your articles

When someone reads your article and wants to discuss it with you, what if there is no comment? Comments are also one of the important ways of interacting with your Blog.
Now many hexo themes have built-in third-party comment systems. The more commonly used ones are:

• Say more: http://duoshuo.com/
• Talk freely: https://changyan.kuaizhan.com/
• Valine：https://github.com/xcss/Valine
• Disqus：https://disqus.com/
• Friendship: http://www.uyan.cc/
• gitment: https://github.com/imsun/gitment
  to see for yourself, whichever you like, your own blog is to be free.
  After choosing your comment system, enter the platform to register, the platform will give you an APPID and appkey. Get this information and set it under the configuration file under your theme.
  Take the next theme and open comments as an example: enter your themes/next, open _config.yml, locate changyan, and change enable to true.

changyan:
  enable: true
  appid: 这里写上你的畅言在appid
  appkey: 这里写上你的畅言在appkey

After setting, re-generate clean and there will be comments:

hexo clean
hexo g
hexo s

Open your preview link and look at the bottom of your article, there is already a comment function. The following picture shows the comment function of my blog:

comment

Let people all over the world know you

I have finished my personal blog, and of course I need to deploy it to the Internet for people to visit. If you don't want to spend money, you can use GitHub Pages, and you can deploy your own website with it.
For children's shoes that GitHub doesn't know how to use, you can take a look at this tutorial of mine: GitHub Complete Usage Guide: https://vip.fxxkpython.com/?cat=6

Create Github pages repository

Then create a public repository of xxx.github.io, where xxx write your name, for example, I wrote wistbean.github.io, then I can access my website through wistbean.github.io.
After the creation is complete, then you have your own Git address.

Install hexo-deployer-git

Enter the following command in your blog directory, so that articles you write locally can be pushed to GitHub.

npm install hexo-deployer-git --save

Configure your Git

Open your configuration file and enter your git address:

deploy:
    type: git
    repo: https://github.com/xxx/xxxx.github.io.git

Push your website to Github

Direct input command: hexo d

d stands for deploy, meaning to deploy up.

Visit your website

After pushing up, you can directly enter your xxx.github.io in the browser to access it!

Have a little personality, tie your domain name

If you don't like the cookie-cutter xx.github.io domain name, you can bind your own domain name.

Buy a domain name

Regarding the purchase of domain names, I would recommend going to dynadot or godaddy. These are foreign domain name vendors. You can use Alipay to purchase them. No filing is required. It is good to use. After binding and
buying your domain name, the next few steps are easy to get it done:

Add CNAME file

Create a new CNAME file in the sources directory of your blog, and write your domain name in this file, for example: www.xxxx.com. Then push the file to your GitHub, you can use the hexo d command.

Add two records for DNS resolution in your domain name business background:

1. 主机记录：@
    记录类型：A
    记录值：192.30.252.154 或者 192.30.252.153

2. 主机记录：www
     记录类型：CNAME
     记录值：xxx.github.io  (这里就是你的github仓库名称)

GitHub set domain name

Set the domain name in your GitHub, click Settings in your GitHub blog project, write your domain name in Custom domain under GitHub Pages, and then save.

GitHub set domain name

At this point, you have set up your own blog, hosted your website on GitHub, and bound your own domain name, then your website can be seen by people all over the world.
Ok, the above is the sharing that Xiaoshuai b brought to you today, I hope it will be helpful to you, then we will see you next time, peace!