Hexo + github Page 快速搭建个人博客

使用 Hexo+Github Page 快速搭建个人博客

注意:本博客仅仅针对纯小白,快速搭建一个能用的博客

# 环境搭建

  1. 安装 NodeJS (建议使用 Node.js 12.0 及以上版本)

  2. 安装 Git(参考廖雪峰 git 教程)

  3. 注册一个 Github 账号

  4. 登录 Github

  5. 在 GitHub 上新建一个仓库

    如图,点击 New repository,在 Repository name 的位置填写域名,格式是 username.github.io.

    比如你的 github 名字是 farewell12345,那么这里就写 farewell12345.github.io

    填完以后可以啥都不用选,拉到最下面点击 Create repository

    创建成功之后,进入仓库,点击右上角的 Settings

    找到 GitHub Pages 选项,选择一个 GitHub 官方提供的主题

    img

    主题随便选一个,选择完毕后在跳转界面点击 Commit changes,就完成了 Github Page 的配置

    这时可以试着访问一下 https://username.github.io (就是刚才在 Repository name 的位置填写的域名),如果正常打开了页面,就说明配置成功了。

  6. 选择一个空文件夹,打开 Bash 窗口(装好 Git 以后右键菜单中自带),使用 npm 安装 Hexo

    npm install hexo-cli -g

    安装完成后依次执行下列命令

    hexo init Blog
    cd Blog
    npm install
    hexo g
    hexo s

    hexo s 输入完毕后,不要关闭 Bash 窗口,就保持这样的状态,然后进入浏览器,输入 http://localhost:4000,去尝试访问这个地址,如果访问到了页面,说明本地 Hexo 环境已经搭建好了

# 开始搭建属于自己的博客

Hexo 主题网站(点击蓝字即可)找一个你最顺眼的主题,点进去,找到它的使用手册,因为不同的主题其说明文档也不一样,所以在配置主题的过程中就需要自己去踩坑了。这里以我目前在用的 Nexmoe 主题为例:

从 Hexo 主题网站找到它以后,点击进入它的 Github 仓库,点击 Code,然后 download zip(如果配置了 Git SSH Key 可以选择直接 clone),下载主题。

打开你电脑上之前用 Hexo 生成的 Blog 文件夹,进入 themes 文件夹中,把刚才下载好的主题 zip 解压并放入这个 themes 文件夹下

打开 blog 目录下的 config.yml 配置文件,修改 theme 为主题文件夹的名字,比如:

在 config.yml 中修改博客名和描述等信息

author: 作者

title:你博客标题(名字)

description:博客描述

url:设置你博客的域名(就刚才在 Github 上设置的那个)

config 基础设置这样就可以了,其他如果想了解的话可以去 Hexo 官方文档

返回主题仓库查看 Readme

查看主题的教程,对主题进行自定义配置

打开主题文件夹

打开这个目录下的 config.yml,对照主题官方文档进行自定义配置

(因为每个人选择的主题不一样,所以这里就不多赘述了,一般主题的官方文档是写得很详细的)

# 运行博客

在 Blog 根目录下运行 Bash 窗口,输入

hexo g
hexo s

访问 http://localhost:4000 就可以看到自己配置出的博客了(如果步骤没有错误的话)

输入

hexo s --debug

可以进入 debug 模式,可以看到博客的运行日志

# 部署博客

进入 Blog 目录下的 public 文件夹,打开 Bash 窗口,依次输入以下命令:

git init
git remote add origin  <你的博客在github上的链接>
git add .
git commit -m "提交的描述"
git push origin master

这里需要获取你的博客在 github 上的链接,打开博客对应的 github 仓库,点击 code,

这个就是仓库的链接

push 成功以后,等一会去查看 github 仓库是否有了我们 push 上去的东西,如果有,那就可以去试着访问 https://username.github.io(就是刚才在 Repository name 的位置填写的域名)了,如果出现了界面,那就说明博客成功了

如果配置的过程中遇到未知错误,请记住搜索引擎是个好东西(

Search by:GoogleBingBaidu