Posted on

效果预览：https://jeremcol.githb.io/archives/index.html

准备阶段：

  1. Windows电脑。

  2. GitHub账号。

  3. 使用hexo框架搭建blog软件。

安装过程：

（1）Node.js安装

  • 按照安装过程依次点击即可，安装过程很简单。

（2）Git安装

  • 按照网上的安装方式进行安装就可以了。

参考网址：

  • git安装：https://www.cnblogs.com/ximiaomiao/p/714456.html
  • SSH key 设置：http://anfengge.com/sing-ssh-key-link-githb-photo-tor.html

（3）Hexo安装

  • 安装淘宝的镜像源（如果错误就重来，因为连接可能不稳定，不要害怕多试几次就可以了）

    npm install -g cnpm --registry=https:// registry.npm.taobao.org

  • 建立一个仓库（repository）

    例如：hansonpang99.github.io

  • 在Blog目录下安装一个hexo部署插件

    cnpm install --save hexo-deployer-git

  • 找到Blog文件中的_config.yml文件，使用编译器打开，建议使用Visual Studio Code打开。

    注：Visual Studio Code的好处：

    1. 支持的语言种类多。
    2. 视图简洁。
    3. 拥有插件种类多。

  • 找到这部分代码，（原始的是没有repo和 branch的，而且type后面也没有东西）对这段代码进行更改：

type: git
repository: <你的GitHub仓库地址>
branch: master

  • 对这段代码进行更改：

    • type一个名字，建议写成git方便识别。
    • repository仓库地址将刚刚新建的GitHub仓库地址复制到这里就可以了。
    • branch分支这里设置管理员master。

  • 更改以后进行保存。

  • 然后再Git里面输入hexo d将本地文件部署到GitHub新建的仓库中。

  • 通过访问https://+自己的仓库名就可以访问部署到GitHub上的blog了（例如：https://hansonpang99.github.io）。

进一步深化操作过程：

  1. 更换Blog的主题

这里以yilia主题为例进行更换。

  • 首先下载yilia主题

    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

（克隆地址）（克隆之后的本地位置）

  • 找到Blog文件中的_config.yml文件，使用编译器打开，建议使用Visual Studio Code打开。

  • 找到这部分代码：

theme: yilia
  • 将冒号后面的内容改为刚刚新建的yilia主题。
  1. 清除数据库

hexo clean

  1. 生成静态网站

hexo generate

  1. 将现在的文件部署到GitHub中

hexo deploy

这样就实现了主题的更改。通过以上的步骤，你就能个性化的打造出一个美观的个人博客网站了！