使用Hexo搭建自己的博客

By AYE 0

通过hexo快速构建个人博客,并搭建到 github 上供他人访问。

准备工作

  • node 环境

  • github 账号

如何搭建

1、新建仓库

github 上新建一个仓库,仓库名必须为 <user-name>.github.io 格式,其中 <user-name> 是你 github 的昵称。

2、全局安装 hexo

npm install -g hexo

3、初始化项目

在项目文件夹下执行命令 hexo init,就会自动构建一个 hexo 项目,紧接着执行 hexo s,浏览器访问 localhost:4000 就可以看到效果啦!

hexo init

// 本地运行
hexo s

4、部署到 github

快速在项目根目录下找到 _congif.yml,找到 deploy 字段并填写完整 。

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <你的仓库地址> # https://github.com/aye1307/aye1307.github.io
  branch: master

然后我们需要额外的一个工具来帮助我们推到仓库上,那就是 hexo-deployer-git

npm install hexo-deployer-git --save

再执行下面两个命令,就可以把项目自动部署到 github 上啦。

hexo clean

hexo deploy

5、查看效果

浏览器访问 https://aye1307.github.io/ 即可看到效果。

至此,已经完成了个人博客的搭建,也可以在浏览器中访问 。

6、绑定个人域名

  1. 域名与 github page 的配置问题

    在项目仓库中点击 Settings ,将域名写在 Custom domain 下并保存。会生成一个 CNAME 文件,内容为所填写的域名。

  2. 配置域名解析

两者都没配好的时候,访问 userName.github.io 时可能会跳转到 github 的 404 页面。如果两者都对应 ip 地址配置好的,清空本地缓存并多刷新访问,有可能页面缓存或 dns 缓存没刷新。

为 hexo 添加 hexo-admin 组件

插件介绍

hexo-admin 是一个 Hexo 博客引擎的管理用户界面插件。这个插件最初是作为本地编辑器设计的,在本地运行 hexo 使用 hexo-admin 编写文章,然后通过 hexo ghexo dhexo g 是本地渲染,hexo d 是将渲染的静态页面发布到 GitHub)将生成的静态页面发布到 GitHub 等静态服务器。如果你使用的是非静态托管服务器,比如自己买的主机搭建的 hexo,那么一定要设置 hexo-admin 的密码,否则谁都可以编辑你的文章。

插件安装

  1. 首先进入 hexo 创建的博客项目的根目录下,执行

    npm install --save hexo-admin

    mac 和 linux 可能需要 root 权限,前面加个 sudo 就可以了。如果报错缺少组件,则缺少什么安装什么,npm install 加缺少的组件。

  2. 运行下列命令启动 hexo-admin:

    hexo server -d

    打开 http://localhost:4000/admin/ 就可以访问到 hexo-admin 管理页面了。

密码保护

打开 setting,点击 Setup authentification here 输入用户名,密码,密钥,下面会自动生成配置文件,复制加在 hexo 根目录下的 _config.yml 中:

admin:
  username: aye
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something

重启 hexo,就可以看到登录页面了 。

发布文章

进入后台之后点击Deploy,里面的Deploy按钮是用来执行发布脚本的,所以我们先在博客根目录下新建个目录admin_script,然后在目录中新建一个脚本hexo-g.sh,里面写下下面代码然后保存。

hexo g && hexo d

然后给hexo-g.sh加入可执行权限

chmod +x hexo-d.sh

然后在_config.yml中的admin下添加

admin:
  username: aye
  password_hash: be121740bf988b2225a313fa1f107ca1
  secret: a secret something
  deployCommand: ./admin_script/hexo-d.sh

设置发布执行的脚本,点击 Deploy 就会执行这个命令并提交到 GitHub 上。

【参考】

5分钟搞定个人博客-hexo

为hexo添加hexo-admin组件

个人博客搭建 github page绑定域名、https跳转