hexo + GitHub 搭建博客

242 阅读5分钟

查了很多资料,咨询各种大牛,想把这个过程总结一下,其中步骤尽可能详细,希望能对需要的小伙伴们有用。
本文章分为三个部分:

博客搭建流程

在开始搭建博客之前,首先小伙伴们请检查自己的电脑里是否存在 Node.js 和 git 的开发环境,之前没安装过的请自行安装,以下为官网链接:

  • Git
  • Node.js
  • Github
    github 用来做博客的远程仓库,没有的小伙伴需要去申请一个账号,此处不做说明如何配置 ssh 。

一.安装hexo

在安装 hexo 之前确保准备工作已经做好,即 git 和 node.js 环境已经安装完毕,GitHub 账号已经申请完毕,我们就可以开始安装 hexo 的环境了。首先可以在本地创建一个新的文件夹进行存放博客目录,创建好之后打开控制台,输入以下命令进行 hexo 的安装。

1
sudo npm install -g hexo

安装之后,可以输入 hexo -Version来查看 hexo 是否正确安装,如图:

如果,你输入完这个命令出现和我一样的界面,那么恭喜你,第一步已经完成啦,( ̄▽ ̄)~*

二.初始化

1. HEXO INIT

打开本地的开发目录,需要输入cd XXX(你创建的开发目录) 到这个目录下,执行以下操作:
例如:我创建了 hexo_blog 这个文件夹来存放博客,

1
hexo init 你的目录名称

初始化成功之后,目录下会自动创建一些文件,我的文件目录是这样的:

初始化成功后,文件内目录如下:

2. 生成静态页面

在控制台输入以下命令,即可自动解析生成 html 文件。

1
hexo generate

3. 本地进行预览

在控制台输入此命令,即可在本地进行预览博客。

1
hexo server

成功如下图:

打开浏览器,输入图中红色框内网址即可预览网站。Ctrl+C 即可暂停。

三.创建 GitHub 项目

本步骤基于已经创建好了 GitHub 账号。

  • 创建新的项目
    登录到自己GitHub首页,点击右上角:

  • 名称及描述
    Repository name 需要填写 XXX.github.io注意这里:XXX需要与你的 GitHub 用户名相同)如图所示:

    description 随意填写一下说明就好,设置好之后,点击创建按钮即可。

  • SSH配置
    密钥的配置这里就不进行多说,没配置过的小伙伴可自行百度就好。

四.配置部署

1. 修改配置文件

GitHub项目创建好之后,回到我们本地的文件目录,之前给大家看过初始化之后本地文件的目录结构:

我们需要修改的是 _config.yml 这个文件,在目录下找到这个文件直接进行修改即可。
打开此文件,找到图中位置:

修改之后为:(注意:分号后需添加空格)

1234
deploy: type: git repo: git@github.com:GKrace/GKrace.github.io.git   branch: master

其中,repo 的值获取方式为你创建好的GitHub项目的克隆地址:

2. 我们还需安装一个库

在控制台输入npm install hexo-deployer-git --save
成功之后如下:

3. 最后一步执行:

1
hexo deploy

在浏览器中输入网址:https://XXX.github.io/,即可打开你的博客。

至此,用 hexo 实现的博客搭建流程完结撒花 ⁽⁽ଘ(ˊᵕˋ)ଓ⁾⁾*

4. 常用命令

  • 在接下来的维护工作中,只需要执行以下命令即可更新博客:

    1
    hexo clean && hexo g && hexo d
  • 常用命令解析:

    1234567
    hexo new "Name" #新建文章hexo new page "pageName" #新建页面hexo generate #生成静态页面至public目录hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)hexo deploy #将.deploy目录部署到GitHubhexo help  #查看帮助hexo version  #查看Hexo的版本

更换主题文件

hexo 提供了炒鸡多并且好看的主题供大家选择,接下来就教教亲们如何进行更换主题。
网址1:hexo.io/themes/
网址2:github.com/hexojs/hexo…
首先大家可以选择一款自己喜欢的主题,例如我的主题是 yilia

1. git clone

打开主题所在的GitHub页面,一般主题的发布者都会在readme中提供说明此主题的使用方式以及克隆地址。

1
git clone XXXX

2. 修改Hexo的配置文件_config.xml:

1
theme: yilia

配置个人域名

1. 打开 阿里云官方网站

个人域名步骤,需要大家去买一个自己喜欢的域名,可自行选择不同的后缀,后缀不同,价钱也不同

  • 登录

    1
    https://wanwang.aliyun.com/
  • 登录之后点击控制台

  • 看左侧导航栏,选择域名与网站下的域名:

  • 此时可以看到自己的域名状态,点击解析:

  • 点击添加解析,

    注意:名称不要忘记加.,正确形式为XXX.github.io.

  • 最后回到本地,在public文件夹下新建文件,并填写自己的域名

  • 执行一遍 hexo clean && hexo g && hexo d 进入GitHub中看CNAME文件是否上传成功

如果以上步骤小伙伴们都已经完成了的话,即可打开 个人域名,查看到自己的博客啦 !
本文至此结束(๑•̀ㅂ•́)و✧

友情链接:Github Pages 部署 https
From: itoss.me