Win10下使用hexo框架在github上搭建个人博客



1. 服务器端准备工作

1.1 域名购买

阿里云域名注册官网:万网

域名购买过程中须进行邮箱和身份证实名认证才可以进行购买

附注:萌新在 阿里云 上购买的域名 www.ccyblog.top

1.2 购买阿里云 ECS 服务器

阿里云服务器搭建博客,建议购买 ECS 服务器。即弹性计算服务。

个人感觉阿里云与腾讯云对新人来所都差不多,看个人爱好购买。个人建议,如果长期使用,建议选择年限高的,一年一年的续费的费用实际是高于直接购买三年的,非常不划算,并且建议,如果不着急使用的话,在阿里搞活动时购买更加划算,如618、双11,我当时没有在搞活动时购买浪费了很多资金 /(ㄒoㄒ)/~~。

我购买的 ECS 共享型 n4 + 1核2G + 3年 + 1M带宽 + 40G高效云盘 +(CentOS 7.9 64位), CentOS 7版本兼容性高。

阿里云官网限量红包领取地址

阿里云服务器新人会场

老用户升级限时特惠入口

1.3 ECS 服务器备案

备案需要有服务器和域名。

阿里云备案管理系统

ICP 备案申请审核通过后,会给我们一个 ICP 备案号,我们需要将备案号在网站底部标明。还需要在网站开通之日起 30 日内登录全国公安机关互联网站安全管理服务平台提交公安联网备案申请。

1.4 阿里云服务器设置

1.4.1 重置密码

新买的 ECS 服务器的 root 用户没有初始密码,需要设置才能用。

控制台->云服务器 ECS ->实例与镜像->实例->实例列表->选择实例->重置实例密码->重启:

1622949787057

1.4.2 远程连接Linux实例

远程连接服务器的方法都很多。当前使用的是阿里云自带的 VNC(Virtual Network Console,虚拟网络控制台)。

  • 第一次登录须修改远程连接(VNC)密码:实例列表 -> 更多 -> 密码/密钥 -> 修改远程连接(VNC)密码:
    1622955700460

  • 进行远程连接:实例列表 -> 选择实例 -> 远程链接:
    1622954831905

  • 输入用户名(root)和密码(root 密码)登录到控制台
    1622956580541

1.4.3 配置安全组

我们需要通过 80 端口访问 nginx 服务,但阿里云没有开启 80 端口的访问权限,所以要手动添加安全组,让相应的端口和 IP 放行。

  • 控制台 -> 云服务器 ECS -> 网络与安全 -> 安全组 -> 查看安全组列表,没有安全组就创建安全组 -> 入口方向 -> 手动添加:
    1622957810353
  • 在实例列表中为实例添加安全组: 更多 -> 网络和安全组 -> 加入安全组:
    1622958378793

2. 在本地计算机安装Hexo环境

2.1 安装 nodejs

1. 进入 官网 https://nodejs.org/en/ 下载 nodejs
nodejs0
2. 打开下载位置,双击 node—-.msi 进行安装
nodejs00

3. 一直 Next
 选择自动安装一些工具
nodejs1

 安装完成,弹出控制台
nodejs2
回车继续

4. 使用 windows + R 输出 cmd 启动命令行
 使用命令 node -vnmp -v 查看版本信息
nodejs3
 如果失败则重启电脑再次输入

5. 输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝的源 cnpm
cnpm1

 输入命令 cnpm -v 查看安装信息
cnpm2

2.2 安装 hexo 框架

windows 命令
	创建目录                 md 目录
	显示指定工作目录下的内容    chdir 
	
hexo 语法
    hexo new "***"    创建新的帖子
    hexo clean        清楚缓存
    hexo g            生成静态文件
    hexo generate
    hexo s            启动服务
    hexo server
    hexo d            部署到远程站点
    hexo deploy

1. 输入命令 cnpm install -g hexo-cli 安装 hexo 框架
hexo1

2. 输入命令 hexo -v 查看版本信息
hexo2

3. 创建目录 blog,命令: md 目录

2. 执行命令 hexo init 会在当前目录下生成 hexo 项目

 生成时卡住输入回车键即可解决

 出现 INFO Start blogging with Hexo! 代表生成成功

hexo4

3. 执行命令 hexo shexo server 开启 hexo 服务
hexo5

 使用路径 localhost:4000 即可访问
 hexo6

 执行命令 ctrl + c 关闭服务即可退出
 hexo7

2.3 安装 git

1. 进入官网 http://git-scm.com/

2. 下载

3. 打开下载位置,双击 Git—-bit.exe 进行安装

4. 安装 Git 工具

 1. 以下安装步骤均为默认选项,不爱折腾的伙伴们可以直接 Next 到 Finsh 完成安装。
 1621504212582

 2. 点击 Next , 选择组件
 

 3. 点击 Next,选择默认编辑器
 

 4. 点击 Next,设置分支名称
 

 5. 点击 Next,配置 PATH 环境
 

 6. 点击 Next,选择 HTTPS 传输后端
 
 
 7. 点击 Next,配置行结束转换
 

 8. 点击 Next,配置终端模拟器与 Git Bash 一起使用
 

 9. 点击 Next,配置 Git 默认行为
 

 10. 点击 Next,选择凭据助手
 

 11. 点击 Next,配置额外选项
 

 12. 点击 Install 安装

5. 打开 Git Bash
 在任意目录下鼠标右键即可看到有 Git GUI HereGit Bash Here 两个选项。

 点击 Git Bash Here 弹出命令行窗口,说明安装成功

3. 配置环境

3.1 安装 nginx 作 Web 服务器

1. 安装 nginx 依赖环境

[root@localhost ~]# yum install gcc-c++
[root@localhost ~]# yum install -y pcre pcre-devel
[root@localhost ~]# yum install -y zlib zlib-devel
[root@localhost ~]# yum install -y openssl openssl-devel

2. 下载 nginx 安装包,解压到 /usr/local 目录下,进入该目录

[root@localhost ~]# wget -c https://nginx.org/download/nginx-1.10.1.tar.gz
[root@localhost ~]# tar -xvf nginx-1.10.1.tar.gz -C /usr/local
[root@localhost ~]# cd nginx-1.10.1/

3. 配置、编译并安装 nginx

[root@localhost nginx-1.10.1]# ./configure
[root@localhost nginx-1.10.1]# make
[root@localhost nginx-1.10.1]# make instal

4. 查找、进入安装目录

[root@localhost nginx-1.10.1]# whereis nginx
nginx: /usr/local/nginx
[root@localhost nginx-1.10.1]# cd /usr/local/nginx

5. nginx 默认通过 80 端口访问,所以开放 linux 的 80 端口

[root@localhost nginx]# /sbin/iptables -I INPUT -p tcp –-dport 80 -j ACCEPT

6. 进入 /usr/local/nginx/sbin 目录,启动 nginx

[root@localhost nginx]# cd sbin
[root@localhost nginx]# ./nginx

如果没有任何消息,则启动成功。
此时,可以通过 “公网IP+端口” 的方式访问 http://xx.xx.xxx.xxx:80/ 进入 nginx 欢迎页面了。
注:可以使用 ./nginx -s stop 命令停止服务

7. 创建部署 hexo 的目录

[root@localhost nginx]# mkdir -p /home/www/hexo

8. 修改配置文件,配置 nginx 服务器路由

[root@localhost nginx]# cd /usr/local/nginx/conf
[root@localhost conf]# vim nginx.conf
......
server{
    listen      80;                                      // 监听端口默认 80
    server_name 123.57.194.99;                           // 修改域名,没有就临时修改为公网ip;

    location / {
        root  /home/www/hexo;                            // 部署根目录修改为 /home/www/hexo;
        index index.html index.htm;
    }
    ......
}

3.2 安装 node.js

1. 回到根目录,安装 node.js

[root@localhost conf]# cd ~
[root@localhost ~]# curl -sL https://rpm.nodesource.com/setup_10.x | bash -
[root@localhost ~]# yum install -y nodejs

2. 查看安装结果,打印版本号即为安装成功。

[root@localhost ~]# node -v
v10.24.1
[root@localhost ~]# npm -v
6.14.12

3.3 配置 Git

3.3.1 安装 Git,查看版本号

[root@localhost ~]# yum install git
[root@localhost ~]# git --version
git version 1.8.3.1

为了实现博客的自动部署,需要使用公钥免密登录服务器。为了安全起见,最好不要使用 root 用户免密登录。因此,需要创建一个用户名为 git 的用户,用于远程公钥免密登录服务器。

3.3.2 创建用户并配置权限

创建 git 用户(用户名叫 git),并配置 git 用户的权限

[root@localhost ~]# adduser git
[root@localhost ~]# chmod 740 /etc/sudoers
[root@localhost ~]# vim /etc/sudoers
root ALL=(ALL) ALL
git ALL=(ALL) ALL        // 添加这一行 
[root@localhost ~]# chmod 400 /etc/sudoers
[root@localhost ~]# sudo passwd git        // 设置密码

3.3.3 给 git 用户配置 ssh 免密公钥登录

1. 切换用户,创建文件夹存放公钥

[root@localhost ~]# su git
[git@localhost root]$ cd ~
[git@localhost ~]$ mkdir .ssh

2. 在本机计算机打开 GitBash,生成公钥/私钥对,给私钥设置权限

$ cd ~
$ cd .ssh
$ ssh-keygen

 遇到系统询问按回车。最后生成两个文件:id_rsa(私钥)和 id_rsa.pub(公钥)。

$ chmod 700 ~/.ssh
$ chmod 600 ~/.ssh/id_rsa

3. 使用 FTP 工具将本机计算机生成的公钥上传到服务器的 ~/.ssh 目录下

FTP 工具下载( FileZilla(Windows版本) )

1622965990189

4. 在服务器新建 authorized_keys 文件,并设置文件权限

[git@localhost ~]$ cd ~/.ssh
[git@localhost ~]$ cp id_rsa.pub authorized_keys
[git@localhost ~]$ chmod 600 ~/.ssh/authorized_keys
[git@localhost ~]$ chmod 700 ~/.ssh

5. 确保设置了正确的 SELinux 上下文。

[git@localhost ~]$ restorecon -Rv ~/.ssh

6. 在本机计算机上使用 ssh 远程登录云服务器,将不会提示输入密码

[git@localhost ~]$ ssh -v git@xxx.xxx.xxx.xxx(阿里云公网IP)
或
[git@localhost ~]$ ssh git@xxx.xxx.xxx.xxx(阿里云公网IP)
Last login: Sun Jun  6 15:29:37 2021

Welcome to Alibaba Cloud Elastic Compute Service !

[git@localhost ~]$ ls

 可能会遇到系统问你是否连接,输入 yes 即可。

3.3.4 配置Git仓库

1. 创建 Git 仓库,并新建一个 post-receive钩子文件编辑其内容,再授予钩子文件可执行权限。

[git@localhost ~]$ cd ~
[git@localhost ~]$ git init --bare hexo.git
[git@localhost ~]$ vim ~/hexo.git/hooks/post-receive
git --work-tree=/home/www/hexo --git-dir=/home/git/hexo.git checkout -f     // 输入

[git@localhost ~]$ chmod +x ~/hexo.git/hooks/post-receive
[git@localhost ~]$ sudo chmod -R 777 /home/www/hexo

  让钩子文件删除/home/www/hexo目录下原有的文件,然后从blog.git仓库 clone 新的博客静态文件到/home/www/hexo目录下。

2. 重启 ECS 服务器。

4. 客户端 hexo 配置

1. 打开本地计算机 hexo 工程目录下的 _config.yml 文件,对 deploy 参数进行修改

deploy:
  type: 'git'
  repo: git@***.***.***.***:/home/git/hexo.git
  branch: master

2. 在 hexo 工程目录下安装插件:

$ cnpm install hexo-deployer-git --save    // 使用Git自动部署
$ cnpm install hexo-server                 // hexo 本地服务器

3. 配置 Git 全局变量

$ git config --global user.email "xxxxxxxxxx@qq.com"
$ git config --global user.name "用户名"

4. 使用 hexo 生成、部署个人博客

$ hexo clean
$ hexo g
$ hexo d

 部署后便可以通过 公网 IP 访问我的博客主页。

5. 域名绑定

云解析 DNS -> 域名解析 -> 选择域名 -> 解析设置:

1622971358788

一段时间后便能通过域名访问。

6. 更换博客主题

  • 找到自己喜欢的主题,下载下来放到 hexo 项目的 themes/ 目录下

我临时使用的 https://github.com/litten/hexo-theme-yilia 这个主题

 在目录 themes/ 下右键鼠标打开 Git Bash 输入指令 git clone 地址 回车进行下载1621570232717
 
 下载完成后在该目录下复制主题名

 1621567563793

  • 修改 _config.yml 配置文件内容

 记事本打 _config.yml 配置文件,修改 theme:landscapetheme: yilia

 清楚缓存 hexo clean 从新部署 hexo d 即可生效


文章作者: AYang
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 AYang !
  目录