搭建这个网站失败了几次后终于成功了。于是决定把步骤和注意事项写下来，纪念一下。

由于这个教程是完全面向一点准备都没有的人，因此，可能遇到已经做过了的，请自行跳过。

注意，安装Git后全程请不要关闭Git Bash

所需工具：

  • 一台电脑 （废话）
  • 有自己的GitHub账户
  • Git
  • Node.js
  • Hexo

准备工作

  • 建立一个GitHub账户

    1. 访问GitHub,由于是外国网站，可能有一点慢。

    2. 在网站上输入注册信息，点击Sign up for GitHub，按提示完成注册

    3. 注册完成后，在欢迎页面点击“Start a project”以新建一个存储库

    4. 在页面中把存储库名字命名为 你的名字.github.io ，其中“你的名字”为你的用户名。像我，就是Lhcfl.github.io

    5. Github这里的步骤完成了！
      如果你想要自己制作一个网页，可以上传你自己制作的index.html。
      以下部分为不会自己做网页的人准备。
      ⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

  • 安装Git

    1. 下载链接：https://git-scm.com/downloads 点击“windows”即可
      由于git是国外网站，很容易下载失败，也可以到我的百度网盘下载。链接

    2. 安装即可。

    3. 按Win+R，在“运行”框里输入cmd打开命令提示符

    4. 输入git --version，如果显示了版本号即成功
      （如果没有，可能是没有添加到Path，请自行百度“Git添加到Path”）

  • 安装Node.js

    1. 下载链接：https://nodejs.org/zh-cn/ (请下载长期支持版)

    2. 安装

    3. 按Win+R，在“运行”框里输入cmd打开命令提示符

    4. 输入node -v，如果显示了版本号即成功

  • 安装Hexo

    1. 按Win+R，在“运行”框里输入cmd打开命令提示符

    2. 输入npm install -g hexo-cli,回车

    3. 等安装完成后，输入hexo -v, 如果显示了版本号即成功。

创建博客

  1. 在你喜欢的地方建立一个文件夹，可以叫Blog

  2. 鼠标右键B，点击Git Bash Here

  3. 输入hexo init,回车.

  4. 输入npm install,回车.

  5. 输入hexo g,回车. 这个命令是部署你的Blog。默认生成一个叫“Hello,world”的博客

  6. 输入hexo s,回车. 这个命令是把生成的网页放在本机服务器上，进入 http://localhost:4000/ 就可以预览成果。

  7. 看完以后，回到Git Bash，按Ctrl+C退出，这时 http://localhost:4000/ 不再可以访问。

发布一篇博客

  1. 在Git Bash里输入hexo new "博客名",博客名可以改成任意的，但是要加英文引号。

  2. 在blog\source_posts 路径下，会有一个 博客名.md 的文件。 编辑这个文件，然后保存。

  3. 回到 Git Bash，输入 hexo g

  4. 输入 hexo s,进入 http://localhost:4000/ 预览成果。按Ctrl+C退出

    1
    2
    3
    4
    5
    6
    7
    8
    编辑时注意事项：
    文件里会有以下几行，不要删除！
    ---
    title: 博客名
    date: XXXX-YY-ZZ
    tags:
    ---
    （title后面是博客标题，date后面的是日期）

博客配置

  • 用户设置

    1. 打开blog\_config.yml
      找到 # Site，添加博客名称，作者名字等。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      说明：
      你会看到以下几行：
      title: 
      subtitle: 
      description:
      keywords:
      author: 
      language: 
      timezone:

      修改时，在对应行后面加入你的东西，
      如：
      title: 我的网页标题
      注意，冒号后面有一个英文空格。

      修改不同地方有不同意义。
      title后面加网页标题
      subtitle后面加副标题
      description后面加网页描述
      author后面加作者名字
      language后面加皮肤语言
      timezone建议不要修改！
      keywords作者还不知道什么意思QAQ

    2. 找到 # URL, 填入 你的网页url。比如 url: https://lhcfl.github.io

  • github上传配置

    1. 获取 Github 对应的 Repository 的链接。
      登陆 Github，进入到你所建立的那个存储库，点击 Clone or download
      复制 URL 待用

    2. 修改博客的配置文件。
      打开配置文件 blog\_config.yml 找到 #Deployment，填入以下内容：

      1
      2
      3
      4
      deploy:  
      	type: git  
      	repository: 你的URL
      	branch: master

      你的URL里面填你复制的那个地址。

    3. 回到 Git Bash
      输入 npm install hexo-deployer-git --save 以安装 hexo-deployer-git (此步骤只需要做一次。)

网页部署到GitHub

  • 回到Git Bash，输入 hexo d
    得到 INFO Deploy done: git 即为部署成功

  • 结果
    到 你的用户名.github.io 查看即可。这时别人已经可以使用这个域名访问你的博客了。

主题

  • Hexo主题仓库
  • 这里，我们以主题Anatole为例子。许多Hexo的主题设置可能需要一定的额外设置。
  • 操作方法：

    1. 回到Git Bash，输入git clone https://github.com/Ben02/hexo-theme-Anatole themes/Anatole
      如果是别的主题，输入git clone 主题的GitHub链接 themes/主题的名字

    2. 打开 blog\_config.yml
      找到 theme:
      把 Hexo 默认的主题 lanscape 修改成主题名，这里是 Anatole。 即 theme: Anatole

    3. 汉化：
      找到 # Site, 在language: 后面写zh-cn,即language: zh-cn
      如果是别的主题，可以打开blog\themes\主题名\languages，里面的.yml文件就是语言文件。中文一般是叫zh-cn或zh-hans
      复制中文配置的无后缀名的文件名，填到# Site的language: 后面就行了。

    4. 安装支持包
      回到Git Bash，输入npm install --save hexo-render-pug
      如果是别的主题，先输入npm install --save hexo-render-，不要回车，再打开blog\themes\主题名\layout,看到什么后缀名就接着输入什么。
      例如，npm install --save hexo-render-ejs。
      （不知道后缀名是什么？请自行百度一下）

    5. 修改图标。进入blog\themes\Anatole\source\images, 里面有三个文件。
      favicon.png是网页的图标。
      logo.png和logo@2x.png是你的头像。
      如果觉得想要修改，替换成自己的就行了

    6. 添加about页和links页
      在blog\source下建立两个文件夹，分别叫做about和links
      在这两个文件夹下各创建一个index.md
      按文档的方式编辑保存即可

    7. 测试。回到 Git Bash，输入 hexo g，回车后输入 hexo s,进入 http://localhost:4000/ 预览成果。按Ctrl+C退出

    8. 如果在Git Bash输入了hexo g和hexo s后，预览后图标没变，请输入hexo clean并重试。

相关链接：