Hexo 搭建教程爬坑日记-2:博客搭建这是我参与更文挑战的第1天，活动详情查看：更文挑战前言先给大家道个歉我看

这是我参与更文挑战的第2天，活动详情查看：更文挑战

前言

先给大家道个歉我看到有一位小伙伴在评论区地下评论两天了。翻一下他的表达，就是我的文章没有下文了。我先道个歉，对不起你对我的关注。具体的理由就是：没有任何理由。好了，今天是6.1儿童节祝你节日快乐哈！！！祝大家节日快乐哈!!!要吃榴莲，让6.1流连忘返开整！！！

目标（写完或者读完这篇文章你可以得到什么）

可用你的github账户名称.github.io 访问到自己的博客 like this

物料准备：

一个GitHub账号(点此链接注册)
Git 基本操作（点此链接可学习git的基础操作）
Node 环境 (点此链接进行安装) 建议版本大于12.0

博客项目构建思路

graph TD
 xxx.github.io可访问 --> 本地搭建Hexo项目--> 本地项目部署至github仓库

开始搭建

1. xxx.github.io可访问

1. 登录github后找到并记住你的 github 账户名称 xxx

2. 新建仓库 Create repository

github 右上角的+号选择 New repository

找到的 github 账户名称键入仓库名称 github账户名.github.io 以我为例 hiciciya.github.io 仓库新建成功

3. 测试 githubpage 是否可访问

恩失败了，不可以访问。原因:我们只是建立了一个空仓库啥都没有是理所应当的哈不要惊恐更不要感觉惊悚

4. Clone仓库到本地

github配置sshkey 默认你们是会的哈这就是一个把电脑和github链接起来的钥匙如果不会也没关系点这里可以学习哈

复制仓库地址

在本地新找一块位置比如说桌面打开命令行工具（gitbash powshell cmder ）

git clone 你的仓库地址

clone 仓库到本地

用IDE（webstorm Vscode sublime ）打开

5. 新建一个html文件 index.html 并推送远端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    My Blog
</body>
</html>

本地提交

git add .

git commit -m "text githubpages"

推送至远端

git push origin master

6. 再次测试 githubpage 是否可访问

浏览器输入 xxx.github.io/

到这里其实就是一个基本最简单的博客了。你可以像开发项目一样去开发一个属于自己的博客。自己博客系统就变成纯编程式了，维护起来效率低，难度大。这样的事情我们可以交给 Blog框架来做比如我们在开篇提到的Hexo。

2. 本地搭建Hexo项目

Hexo 是什么

一个博客框架项目语法 Markdown（当然你也可以配置其他）

安装 Hexo

1. 环境准备

基础环境配置完善 (详见基础物料) 可以输入一下命令进行环境 check 是否安装成功

git --version

node -v

npm -v

2. 安装

``` npm install -g hexo-cli ```

3. 初始化博客项目

执行一下命令

hexo init xxx.github.io

cd xxx.github.io

项目结构如下：
```
hiciciya.github.io
├── db.json
├── node_modules  // 依赖 
├── package.json // 应用程序信息
├── scaffolds  //模板文件夹 
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source // 资源文件夹 
│   └── _posts
├── themes //主题 博客风格
├── _config.landscape.yml
└── _config.yml //网站配置信息
```

4. 本地运行项目：

npm run server

hexo -s

项目本地就运行起来了 it'S WORK。

我们看到首页默认有一篇HelloWord文章我们思考如何去控制这篇文章在已生成目录中去找与Helloword内容相匹配的文件发现/source/_posts/HelloWord 与我们看到的文章内容匹配

├── source
│   └── _posts

5. 尝试修改初始化的文章内容

---
title: 我的第一篇文章
---

页面中文章名称跟着变化生效了

得出的结论是 /source/_posts下的md控制文章视图

6. 新建文章

执行hexo new MyWord

顺着我们刚才的逻辑 /source/_posts 应该增加一个名为MyWord.md的文件

这样一篇文章就新建成功了编辑文章内容：在MyWord.md 可以随便来点内容

---
title: MyWord
date: 2021-06-03 13:49:16
tags: 
---
### 我的世界很简单 简单到我每顿只吃大龙虾

页面同步更新哈

恭喜第一篇博文发表成功但是此刻仅是在本地哈

3. 部署 Githubpages

部署思路

graph TD
本地代码变化 --> 同步到远端仓库--> 客户端同步更新

能自动化实现该流程是理想状态持续集成（CI）工具是最优解 Hexo 官方推荐 Travis

开始部署

1. Travis与github关联

点击 [https://www.travis-ci.com/](https://www.travis-ci.com/)进入Travis官网 右上角点击 `Sign in`按钮

进入登录界面点击 SIGN IN WITH GITHUB 按钮

登录成功

2. Github 配置 Travis CI 权限

点击当前页按钮Activate all repositories using GitHub Apps

进入授权页面点击 APProve Install

初次关联的话会重定向一些页面如果有需要就选择绿色按钮绿色代表同意完成授权

3. 新建 Personal Access Token

点击github.com/settings/to… 点击 Generate new token

键入Token名称在Note项填入 GH_TOKEN 并只勾选 repo 的权限左下角Generate token Token生成成功复制新生成的Token如下图所示

4. Travis CI 配置 Environment Variables 对应的项目仓库配置环境变量

回到 Travis CI主页右侧选择选项目仓库点击右上角 More options 下拉选择Settings

滚动至 Environment Variables

新建环境变量 Name为GH_Token VALUE为我们在 GitHub 生成的 Token

ps：保证 DISPLAY VALUE IN BUILD LOG 不被勾选避免你的 Token 泄漏。

项目配置CI

1. 新建一个 .travis.yml

复制以下内容至 .travis.yml 文件

sudo: false
language: node_js
node_js:
  - 12 # use nodejs v12 LTS
cache: npm
branches:
  only:
    - master # build master branch only
script:
  - hexo generate # generate static files
deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GH_TOKEN
  keep-history: true
  on:
    branch: master
  local-dir: public

2. 提交本地代码至远端

git add .

git commit -m "add travis config"

git push origin master

Travis CI 应该会自动开始运行，并将生成的文件推送到同一 repository 下的 gh-pages 分支下

回到Travis CI 官网如下图所示完成部署

3. 修改 GithubPages 部署分支

回到Github对应项目主页点击 Settings 右侧侧边栏选择 Pages Source 下选择分支为 gh-pages (默认部署为master分支) 点击Save

4. 浏览器访问 xxxx.github.io

没有成功？？？我也一直是这样认为的，各种百度，吸取百家之长此时只是需要等10分钟或者20分钟

稳住！！！

done!!!

Hexo 搭建教程 爬坑日记-2:博客搭建

前言

目标 （写完或者读完这篇文章 你可以得到什么）