Hexo部署github博客

逃离我推掉我的手 2022-05-14 06:39 323阅读 0赞

## Hexo部署github博客 ##

#### 一、简介 ####

> 使用github创建一个仓库为github.io就能变成一个使用域名能够访问的博客站点。然后我们通过Hexo创建文章，发布到`github.io`仓库，Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。Hexo能够快速生成博客和部署博客，使创建博客更加简单。

#### 二、安装清单（Mac OS） ####

<table> 
 <thead> 
  <tr> 
   <th>安装环境</th> 
   <th>安装原因</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>git</td> 
   <td>给github上传文章</td> 
  </tr> 
  <tr> 
   <td>Node.js</td> 
   <td>Hexo基于Node.js开发</td> 
  </tr> 
  <tr> 
   <td>Hexo</td> 
   <td>生成博客静态页面</td> 
  </tr> 
 </tbody> 
</table>

#### 三、创建github.io网站 ####

1）点击New repository

2）输入Repository name，必需为`username.github.io`格式。username替换为用户名

3）点击按钮Create repository

4）进入仓库`username.github.io`,点击`setting`,找到`GitHub Pages`模块

5）点击`choose a theme`选择一个页面主题

6）访问`https://username.github.io`就可以访问博客网站了

#### 四、安装git ####

下载安装：[http://sourceforge.net/projects/git-osx-installer/][http_sourceforge.net_projects_git-osx-installer]

验证是否安装成功：

➜  ~ git version
    git version 2.15.0

#### 五、安装Node.js ####

下载安装：[https://nodejs.org/en/][https_nodejs.org_en]

验证是否安装成功：

➜  ~ node -v
    v8.9.4

#### 六、安装Hexo ####

安装命令: `npm install -g hexo-cli`

验证是否安装成功：

➜  ~ hexo -v
    hexo-cli: 1.1.0
    os: Darwin 17.3.0 darwin x64
    http_parser: 2.7.0
    node: 8.9.4
    v8: 6.1.534.50
    uv: 1.15.0
    zlib: 1.2.11
    ares: 1.10.1-DEV
    modules: 57
    nghttp2: 1.25.0
    openssl: 1.0.2n
    icu: 59.1
    unicode: 9.0
    cldr: 31.0.1
    tz: 2017b

#### 七、创建本地博文服务 ####

1.  然后创建一个空文件夹, 比如：`hexo-blog`
2.  进入`hexo-blog`目录
3.  执行`hexo init`初始化博客站点，如果最后一行显示`Start blogging with Hexo!`，代表创建成功
4.  执行`hexo server` 启动博文站点
5.  访问`http://localhost:4000`就能打开博文了
6.  `Ctrl+C`关闭服务器

➜  ~ mkdir hexo-blog
    ➜  ~ cd hexo-blog
    ➜  hexo-blog hexo init
    INFO  Cloning hexo-starter to ~/hexo-blog
    Cloning into '/Users/zhengyong/hexo-blog'...
    remote: Counting objects: 68, done.
    remote: Total 68 (delta 0), reused 0 (delta 0), pack-reused 67
    Unpacking objects: 100% (68/68), done.
    Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
    Cloning into '/Users/zhengyong/hexo-blog/themes/landscape'...
    remote: Counting objects: 838, done.
    remote: Compressing objects: 100% (6/6), done.
    remote: Total 838 (delta 1), reused 3 (delta 0), pack-reused 832
    Receiving objects: 100% (838/838), 2.55 MiB | 90.00 KiB/s, done.
    Resolving deltas: 100% (441/441), done.
    Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
    INFO  Install dependencies
    npm WARN deprecated titlecase@1.1.2: no longer maintained
    npm WARN deprecated postinstall-build@5.0.3: postinstall-build's behavior is now built into npm! You should migrate off of postinstall-build and use the new `prepare` lifecycle script with npm 5.0.0 or greater. > fsevents@1.2.4 install /Users/zhengyong/hexo-blog/node_modules/fsevents > node install [fsevents] Success: "/Users/zhengyong/hexo-blog/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed Pass --update-binary to reinstall or --build-from-source to recompile > nunjucks@3.1.3 postinstall /Users/zhengyong/hexo-blog/node_modules/nunjucks > node postinstall-build.js src npm notice created a lockfile as package-lock.json. You should commit this file. added 464 packages in 28.659s INFO Start blogging with Hexo! ➜ hexo-blog hexo server INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. ^CINFO Good bye

#### 七、Hexo关联github ####

1）进入`hexo-blog`根目录

2）安装`npm install hexo-deployer-git --save`，用Hexo发布博文

3）打开`hexo-blog`根目录下的\_config.yml，拉倒最下面, 修改Deployment方式如下：

# Deployment
    ## Docs: http://hexo.io/docs/deployment.html
    deploy:
      type: git
      repository: https://github.com/username/username.github.io
      branch: master

4）进入`hexo-blog`根目录执行如下命令（参考：[https://hexo.io/zh-cn/docs/commands][https_hexo.io_zh-cn_docs_commands]），第一次上传可能会让你输入git的用户名和密码

hexo clean
    hexo generate
    hexo deploy

5）如果成功，就可以打开 `http://username.github.io`,`username`替换成自己用户名

#### 八、使用Hexo创建和发布文章 ####

1) 进入`hexo-blog`根目录

2) 创建文章命令：`hexo new "文章标题"`

➜  blog hexo new "Hexo部署github博客"
    INFO  Created: ~/Documents/GitHub/hexo-blog/source/_posts/Hexo部署github博客.md

3) 打开编辑`Hexo部署github博客.md`文件进行`Markdown`编辑

open ~/Documents/GitHub/hexo-blog/source/_posts/Hexo部署github博客.md`

4）发布文章：`hexo d -g`

➜  blog hexo d -g
    INFO  Start processing
    INFO  Files loaded in 922 ms
    INFO  Generated: index.html
    INFO  Generated: archives/2018/09/index.html
    INFO  Generated: archives/index.html
    INFO  Generated: 2018/09/03/hello-world/index.html
    INFO  Generated: archives/2018/index.html
    INFO  Generated: 2018/09/03/my-first-hexo-blog/index.html
    INFO  Generated: fonts/iconfont.8c627f.woff
    INFO  Generated: fonts/iconfont.45d7ee.svg
    INFO  Generated: fonts/iconfont.16acc2.ttf
    INFO  Generated: fonts/default-skin.b257fa.svg
    INFO  Generated: fonts/tooltip.4004ff.svg
    INFO  Generated: img/default-skin.png
    INFO  Generated: img/scrollbar_arrow.png
    INFO  Generated: img/preloader.gif
    INFO  Generated: fonts/iconfont.b322fa.eot
    INFO  Generated: slider.e37972.js
    INFO  Generated: mobile.992cbe.js
    INFO  Generated: main.0cf68a.js
    INFO  Generated: main.0cf68a.css
    INFO  Generated: 2018/09/04/Hexo部署github博客/index.html
    INFO  20 files generated in 475 ms
    INFO  Deploying: git
    INFO  Clearing .deploy_git folder...
    INFO  Copying files from public folder...
    INFO  Copying files from extend dirs...
    warning: CRLF will be replaced by LF in fonts/tooltip.4004ff.svg.
    The file will have its original line endings in your working directory.
    [master d1c205f] Site updated: 2018-09-04 11:11:08
     6 files changed, 835 insertions(+)
     create mode 100644 2018/09/04/Hexo部署github博客/index.html
    To https://github.com/zyongjava/zyongjava.github.io
       3f0aab7..d1c205f  HEAD -> master
    Branch 'master' set up to track remote branch 'master' from 'https://github.com/zyongjava/zyongjava.github.io'.
    INFO  Deploy done: git

#### 九、参考文献 ####

1.  [https://www.jianshu.com/p/863f3f2d1733][https_www.jianshu.com_p_863f3f2d1733]
2.  [https://hexo.io/zh-cn/docs/commands][https_hexo.io_zh-cn_docs_commands]

#### 十、示列博客 ####

移步：[https://zyongjava.github.io/][https_zyongjava.github.io]

[http_sourceforge.net_projects_git-osx-installer]: http://sourceforge.net/projects/git-osx-installer/
[https_nodejs.org_en]: https://nodejs.org/en/
[https_hexo.io_zh-cn_docs_commands]: https://hexo.io/zh-cn/docs/commands
[https_www.jianshu.com_p_863f3f2d1733]: https://www.jianshu.com/p/863f3f2d1733
[https_zyongjava.github.io]: https://zyongjava.github.io/