黑马程序员技术交流社区

标题: 【广州前端】- 使用 Hexo+Github 搭建博客（二） [打印本页]

---

作者: AngularBaby    时间: 2017-12-14 16:31
标题: 【广州前端】- 使用 Hexo+Github 搭建博客（二）


上文已经完成 利用 hexo 在本地搭建了一个【博客】
本文会将本地【博客】推送到 github 上进行展示

> 原理：
每个 Github 账户都可以创建一个 YourName.github.io 的仓库，
这个仓库的 master 分支是可以直接使用 YourName.github.io 在网络中访问的，
我们可以利用 Github 的这个功能来进行静态页面的展示。


> 有两种部署的方式：
一种是手动部署
一种是使用 hexo 命令部署

一、 手动部署

1. 清空之前生成的博客文件
    > 进入 bash 小黑窗，输入 hexo clean （如果服务器开启中，可以使用 Ctrl + c 停止）
       

2. 生成博客文件
    > 输入 hexo g
    ~~~
    $ hexo g
    ~~~
    > 生成完成！
       

3. 进入 public 文件夹中，开启 bash 黑窗
    > 进入 public 文件夹
      
    > 开启 bash 黑窗
   

4. 输入git init 初始化仓库，并使用 add 和 commit 提交
    ~~~
    $ git init
    $ git add .
    $ git commit -m 'blog'
    ~~~
    > git init & git add .


    > git commit

    > 完成提交！


5. 使用 git push 命令推送到 Github 仓库
    > 注意后面需要加上 --force 强制覆盖
    ~~~
    $ git push https://github.com/YourName/YourName.github.io.git master --force
    ~~~
    > 如果使用 https 地址，需要输入用户名和密码

    > 推送完成！



6. 在浏览器输入 YourName.github.io 来访问你的博客



二、使用 hexo 命令部署

* 此方法需要配置 SSH 密钥来免密提交，SSH 的配置方法参考 GIT如何配置单个或多个SHH密钥

1. 在 blog 文件夹中打开 bash 黑窗，安装部署工具
      
    > 输入 npm i hexo-deployer-git --save  来安装 hexo 部署工具
    ~~~
    $ npm i hexo-deployer-git --save
    ~~~
    > 同样可以使用 cnpm 进行安装（推荐）


2. 找到 '~/blog/_config.yml' 文件，修改最后的代码：
    > 代码如下：
    ~~~
    deploy:
        type: git
        repo: git@github.com:YourName/YourName.github.io.git
        branch: master
    ~~~


3. 清空之前生成的博客文件
    > 打开 bash 小黑窗
    > 输入 hexo clean


4. 生成博客文件
    > 输入 hexo g
    ~~~
    $ hexo g
    ~~~
    > 生成完成！


5. 部署到 Github
    > 输入 hexo d
    ~~~
    $ hexo d
    ~~~
    > 最后显示 INFO  Deploy done: git 代表部署成功


6. 在浏览器输入 YourName.github.io 来访问你的博客



总结常用命令
~~~
$ hexo clean
// 清空 ( hexo generate ) 生成的博客

$ hexo g （hexo generate）
// 生成博客文件

$ hexo s （hexo server）
// 启动本地服务器

$ hexo d （hexo deploy）
// 按照配置好的_config.yml文件，完成部署
~~~

点击查看更多精彩前端资源

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2