一个执着于技术的公众号

前言

前几天有朋友请教搭建个人博客的问题,索性就利用Hexo+Github搭建了一套个人博客。先上链接,欢迎访问:

www.ailulu.online

说明:这个地址仅作为临时教程环境,搭建完毕后,可能过几天就删除了。虽是实验环境,但完全是实战的,搭建完毕就可以通过公网访问~

搭建博客步骤

1、本次实验使用 CentOS 7.7

[root@qll251 ~]# cat /etc/redhat-release
CentOS Linux release 7.7.1908 (Core)
[root@qll251 ~]#

2、安装git

 yum -y install git

安装后,用git --version查看一下版本

git是一个分布式版本控制系统,用于项目的版本控制管理。这里用于管理你的hexo博客文章,上传到Github的工具。

3、安装node.js

1)下载node.js安装包
wget https://nodejs.org/dist/v10.0.0/node-v10.0.0-linux-x64.tar.gz

2)解压至/usr/local/下
 tar -zxvf node-v10.0.0-linux-x64.tar.gz -C /usr/local/

3)将解压后的文件夹重命名为 node-v10.0.0
[root@qll251 ~]# cd /usr/local/
[root@qll251 local]# mv node-v10.0.0-linux-x64 node-v10.0.0

4)检查是否安装成功,node -v出现版本号说明安装成功
[root@qll251 local]# cd node-v10.0.0/bin/
[root@qll251 bin]# ls
node  npm  npx
[root@qll251 bin]# ./node -v
v10.0.0
[root@qll251 bin]#

5)做软链接使node和npm命令能够全局使用
[root@qll251 bin]# ln -s /usr/local/node-v10.0.0/bin/node /usr/local/bin/node
[root@qll251 bin]# ln -s /usr/local/node-v10.0.0/bin/npm /usr/local/bin/npm

注意:Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本

之所有安装nodejs,是因为Hexo是基于node.js驱动的一款博客框架。

4、安装hexo

以上必备的应用程序安装完成后,即可使用 npm 安装 Hexo

执行npm install -g hexo-cli

会有如下两条WARN

零成本 | 手把手教你搭建免费个人博客!_博客

经查询发现这两条warning信息是因为安装的fsevent是Mac系统需要的。这里是Linux环境,所以会有告警,忽略即可。

5、配置hexo命令全局生效

我们用hexo -v查询下hexo版本

零成本 | 手把手教你搭建免费个人博客!_博客_02

提示命令找不到,因此做个hexo命令的软链接,使hexo命令全局生效

零成本 | 手把手教你搭建免费个人博客!_博客_03

6、初始化hexo

[root@qll251 ~]# hexo init myblog
[root@qll251 ~]# cd myblog
[root@qll251 ~]# npm install

新建完成后,myblog文件夹的目录如下:

.
├── _config.yml # 博客的配置文件,您可以在此配置大部分的参数。
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹,用来存放您的文章
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件
└── themes  # 主题文件夹

7、启动hexo

好了,如果上面的命令都没报错的话,现在可以启动hexo了~

零成本 | 手把手教你搭建免费个人博客!_博客_04

在浏览器上输入:http://localhost:4000;就可以预览效果了

零成本 | 手把手教你搭建免费个人博客!_博客_05

至此,我们本地的博客就搭建成功了,接下来就是部署到 Github Page 了。

GitHub创建个人仓库

首先,你先要有一个GitHub账户,如果还没有。点击注册

1、注册GitHub

点击Sign up,按照提示进行注册零成本 | 手把手教你搭建免费个人博客!_博客_06

2、新建GitHub仓库

点击 Start project创建一个新的仓库

零成本 | 手把手教你搭建免费个人博客!_博客_07

3、创建代码库

1)点击New,创建用于托管博客站点的代码库零成本 | 手把手教你搭建免费个人博客!_博客_08

2)创建代码库

零成本 | 手把手教你搭建免费个人博客!_博客_09

注意,这里仓库命名规定:账户名.github.io

比如账户名是test,那么仓库名就是test.github.io

配置 SSH key

1)配置全局GitHub账户

[root@qll251 ~]# git config --global user.name "qinlulu518"
[root@qll251 ~]# git config --global user.email "1158322022@qq.com"

账号名及邮箱填写您注册GitHub上的信息

2)生成密钥 SSH key

ssh-keygen -t rsa -C "上面的邮箱"

3)复制公钥

id_rsa.pub为公钥,cat查询后全部复制下来。

零成本 | 手把手教你搭建免费个人博客!_博客_10

4)复制公钥到GitHub

(a) 回到GitHub,Settings-->SSH and GPG keys零成本 | 手把手教你搭建免费个人博客!_博客_11

(b) 点击New SSH key

零成本 | 手把手教你搭建免费个人博客!_博客_12

(c) 把 刚刚cat id_rsa.pub的结果复制进来,然后提交零成本 | 手把手教你搭建免费个人博客!_博客_13

(d) 提交后会进行密码验证零成本 | 手把手教你搭建免费个人博客!_博客_14

5)确认并添加主机到本机SSH可信列表

零成本 | 手把手教你搭建免费个人博客!_博客_15

将hexo部署到GitHub

1、安装部署插件 hexo-deployer-git

cd myblog
npm install hexo-deployer-git --save

2、修改配置文件

vim ~/myblog/_config.yml

拉到文件末尾,填上如下配置:

100 deploy:
101   type: git
102   repo:
103     github: https://github.com/qinlulu518/qinlulu518.github.io.git
104   branch: master

注意:第103行中替换成你的用户名

3、部署上传

[root@qll251 myblog]# hexo clean  //清除之前生成的东西
[root@qll251 myblog]# hexo generate  //生成静态文章
[root@qll251 myblog]# hexo deploy  //部署文章,需要输入username和password

4、验证登录

在浏览器上输入:https://你的用户名.github.io

此时就可以看到你的博客了~零成本 | 手把手教你搭建免费个人博客!_博客_16

发布第一篇博客

1、创建文章标题

零成本 | 手把手教你搭建免费个人博客!_博客_17

执行完 hexo new后,在~/myblog/source/_ports/下生成了“开源Linux.md”的文章文件。

零成本 | 手把手教你搭建免费个人博客!_博客_18

.md是Markdown格式的文件。语法比较简单的,具体用法网上搜有很多详细教程的。我最近公众号文章排版使用的就是Markdown格式,很香~

2、编写第一篇博客

零成本 | 手把手教你搭建免费个人博客!_博客_19

3、上传至GitHub

[root@qll251 myblog]# hexo clean  //清除之前生成的东西
[root@qll251 myblog]# hexo generate  //生成静态文章
[root@qll251 myblog]# hexo deploy  //部署文章,需要输入username和password

4、访问验证

浏览器上输入:https://你的用户名.github.io

零成本 | 手把手教你搭建免费个人博客!_博客_20

不出意外的话,我们的第一篇博客就发布出去了。

设置域名

现在你的个人博客的地址是yourname.github.io。如果不喜欢这个网址,我们是可以为它设置个人域名的,但是要花钱购买域名哦~

假如你已经从域名供应商那里购买了域名,接下来一起看下如何配置域名解析

1、登录域名管理控制台

点击管理

零成本 | 手把手教你搭建免费个人博客!_博客_21

2、域名解析

添加一条CNAME记录

零成本 | 手把手教你搭建免费个人博客!_博客_22

3、进入github设置,绑定域名

零成本 | 手把手教你搭建免费个人博客!_博客_23

找到 Custom domain项,输入你购买的域名

零成本 | 手把手教你搭建免费个人博客!_博客_24

4、绑定成功,进行验证

至此你就可以通过输入你自己注册的域名进入你的博客了~

零成本 | 手把手教你搭建免费个人博客!_博客_25

结语

今天我们只演示了简单的博客创建流程,后面还有好多好玩的配置与插件功能;比如 更换主题、开启打赏功能、添加评论系统、设置腾讯公益404页面、数据统计等等。这些都可以参考官网配置手册修改相应的配置,达到自己想要的效果,慢慢完善你的专属博客吧~

最后附 官网使用文档链接:
http://theme-next.iissnan.com/getting-started.html

零成本 | 手把手教你搭建免费个人博客!_博客_26

  往期精彩  

◆  必看 | Linux系列学习书籍免费送

◆  利用expect批量修改Linux服务器密码

◆  Linux运维工程师面试问答录

◆  LVM逻辑卷学习

◆  Linux网络重点知识总结性梳理

◆  抓包工具tcpdump用法说明

◆  一文带你速懂虚拟化KVM和XEN

◆  实战 | Hadoo大数据集群搭建

◆  运维工程师心法:6大技能让你告别背锅

◆  亿级web系统负载均衡几种实现方式

 

十年磨一剑