hexo+github搭建自己的博客

发表于 | 分类于


1、新建git库

在Repository name下填写yourname.github.io：必须填写自己github的账号名；
Description (optional)下填写一些简单的描述：如：个人博客：https://Ethan66.github.io

2、Hexo的本地配置

  1. 安装hexo

    1
    npm install hexo-cli -g

  2. 创建并进入新文件夹

  3. 初始化hexo

    1
    hexo init

  4. 安装hexo和npm包

    1
    2
    npm install hexo --save
    npm install    //试过，不装这个主题不能更换

  5. 生成静态页面

    1
    hexo generate（hexo g也可以）  //会增加public文件夹

  6. 启动本地服务

    1
    hexo server（hexo s也可以）

3、将Hexo与github page 联系

  1. 配置Deployment
    在_config.yml文件中，找到Deployment，然后按照如下修改(一定不要用记事本改，会出现乱码)：

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:yourname/yourname.github.io.git
      branch: master

  2. 比如我的仓库的地址是git@github.com:Ethan66/Ethan66.github.io.git，所以配置如下

    1
    2
    3
    4
    deploy:
      type: git
      repo: git@github.com:Ethan66/Ethan66.github.io.git
      branch: master

  3. ctrl+c取消本地服务执行配置命令

    1
    2
    hexo generate (先生成一下)
    hexo deploy（hexo d也可以）

  4. 提示not found git，执行命令

    1
    2
    npm install hexo-deployer-git --save
    //接下来会出现不同错误，根据提示增加模块

  5. 模块都配置完成后，再执行配置命令

    1
    2
    3
    hexo deploy（hexo d也可以）
    //本地会出现配置好的.deploy_git文件，里面就是最后得到的博客的页面
    //这个命令会将.deploy目录自动部署到GitHub

4、写博客、发布文章

  1. 设置密码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    1、 打开themes->next->layout->_partials->head.swig
    加入下列代码
    <script>
        (function(){
            if('{{ page.password }}'){
                if (prompt('请输入文章密码') !== '{{ page.password }}'){
                    alert('密码错误！');
                    history.back();
                }
            }
        })();
    </script>
    然后再文章里添加设置
    ---
    title: 'typescript文档知识点'
    date: 2018-10-04 17:09:12
    tags:
    - typescript
    password: ts
    ---

  2. 首先需要设置分类和标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    1、打开命令行，进入博客所在文件夹。执行命令
    $ hexo new page categories
    2、成功后提示
    INFO  Created: ~/Documents/blog/source/categories/index.md
    3、点击文件默认内容
    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    ---
    4、输入内容
    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    type: "categories"
    ---
    5、然后添加分类的文章
    ---
    title: jQuery对表单的操作及更多应用
    date: 2017-05-26 12:12:57
    categories: 
    - web前端
    ---

  3. 设置标签

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    1、打开命令行，进入博客所在文件夹。执行命令
    $ hexo new page tags
    2、成功后提示
    INFO  Created: ~/Documents/blog/source/tags/index.md
    3、点击文件默认内容
    ---
    title: 标签
    date: 2017-05-27 14:22:08
    ---
    4、输入内容
    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    type: "tags"
    ---
    5、然后添加分类的文章
    ---
    title: jQuery对表单的操作及更多应用
    date: 2017-05-26 12:12:57
    categories: 
    - web前端
    tags:
    - jQuery
    - 表格
    - 表单验证
    ---
    0000. 主页的摘要分界线

// 上面的内容就是显示在主页的摘要，把图片放在上面，这样主页摘要就会显示图片

1
2
```
1. 新建一篇博客，执行下面的命令

hexo new post “article title”
//这时候在我的 电脑的目录下 \source\ _posts 将会看到 article title.md 文件

1
2
2. 用MarDown编辑器打开就可以编辑文章了
3. 文章编辑好之后，运行生成、部署命令

hexo g // 生成
hexo d // 部署
//不管是编辑还是创建博客文档后，都要执行这两步

1
2
3
4
5
6
7
8
9
10
11
12
4. 打开博客网址，如https://Ethan66.github.io/
> 大写字母输入到浏览器后都会变小写，没影响，github部署比较慢，要等几分钟才能看到博客

#### 5、更换主题
1. 不错的主题
> 在github上搜索hexo-theme，然后按star排序，找到自己喜欢的主题，如：
https://github.com/iissnan/hexo-theme-next   （star最高）
> https://github.com/viosey/hexo-theme-material  （自己喜欢的）
https://github.com/litten/hexo-theme-yilia
https://github.com/SuperKieran/TKL
注：上面的地址有可能不是最新版本的主题
2. 使用方式：找到喜欢主题的github地址，readme都有介绍的，一般操作如下：

git clone https://github.com/iissnan/hexo-theme-next themes/next
//这时clone下来的主题会放到当前目录的themes下面

1
3. 更新主题

cd themes/next
git pull

1
2
4. 更改配置：打开 站点配置文件_config.yml， 找到 theme 字段，并将其值更改为 next
5. 验证主题：先在本地验证

hexo g //生成
hexo server //启动本地服务器

1
5. 上传到github

hexo d

1
2

#### 6、常见命令解析

hexo new”postName” #新建文章

hexo new page”pageName” #新建页面

hexo generate #生成静态页面至public目录

hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）

hexo deploy #将.deploy目录部署到GitHub

hexo help # 查看帮助

hexo version #查看Hexo的版本
```

7、其他资料：

next主题的官方文档地址
其他教程
其他教程
next个性化设计