hexo+github blog(一)：搭建

Posted on | In ,
[ 唠叨 ] 刚开始学习前端的时候，我总是会遇到各种各样奇奇怪怪的坑，而网上的一些总结博文总能让一直深陷神坑而绝望的我好像瞬间获得一点希望的曙光，我觉得程序猿的圈子里最吸引我的就是这种无私而纯粹的技术分享交流吧，而我也希望我的一些踩坑经验能帮助其他同坑中人，嘿嘿。

我也试过把博客写在免费的博客站点，可是总感觉缺少点什么，后来偶然了解到可以自己搭建博客，顿时心生向往，可是一直被因为各种元素（懒）搁置了，现在是时候来填坑啦~hexo+github博客的搭建方法网上很多，可是还是免不了会掉一些奇奇怪怪的坑，鉴于网上类似的教程很多，所以我只详细说我觉得需要注意的地方，希望能给你们避雷：）

一、GIT

  1. 新建代码库

  2. 设置代码库

  3. 新建gh-page

    在代码库的setting页面底部新建gh-page,并选择master branch,最后save

    • github改版之后发现已经没有Automatic page generator 这个按钮了，需要自己手动新建page，可是我在新建的时候发现是无法点击master branch的选项。后来当我手动增加了readme.md之后，发现master那两个选项都可以点击了（emmm..如果分支是空的话就不能设置页？+ +），或者你在新建仓库的时候记得把 Initialize this repository with a README 这个选项勾上就好啦（也就是上图中步骤②）

  4. done

    然后新建page标题的下方出现你的博客域名，在之后你可以通过这个域名访问你的博客。

二、node.js

下载并安装node.js: https://nodejs.org/en/download/
根据提示基本一路按next就可以安装完成啦~就不截图了

  • hexo博客需要在node.js环境下运行，所以我们需要给博客配置node.js
  • 安装完之后按ctrl + R输入cmd，在命令行窗口中先后输入node -v和npm -v，如若出现版本信息则安装成功。

三、hexo

  1. 安装hexo

    在你觉得适合的地方新建一个放博客文件的文件夹，并在该文件夹右键点击git bash，并输入

    1
    $ npm install -g hexo-cli

    按回车并等待安装hexo。同样的，你也可以在命令行窗口使用hexo -v检查你是否已经安装成功。

    • 如果网速不好，建议使用淘宝的npm镜像，步骤为先后输入
      1
      2
      3
      $ npm install -g cnpm --registry=https://registry.npm.taobao.org 
      $ cnpm install -g hexo-cli 
      $ cnpm install hexo --save
  • npm是Node包管理器，它是在安装node的时候便一同被安装，其中一个功能就是你可以直接使用npm下载第三方代码或程序。了解更多戳下面
    什么是NPM, 为什么要用NPM来管理包

  1. 初始化hexo

    同样是在上述文件夹，执行下列命令

    1
    2
    $ hexo init //初始化
    $ npm install //安装依赖和插件

    文件夹会出现下述目录结构

    .
├── _config.yml
├── package.json
├── scaffolds
├── source
 |   ├── _drafts
 |   └── _posts
 └── themes

  2. 在本地运行hexo

    执行下列命令，便可以在浏览器输入localhost:4000看到你的小博客儿啦~ 

    1
    $ hexo s -g
    • $ hexo s -g是由 $ hexo g 和 $ hexo s两条命令合并在一起，更多常见hexo命令可以见本文文末~
    • 按ctrl+c停止运行服务器

四、把博客挂载在github上

  1. 在上述文件夹中找到并打开_config.yml，找到下图中的deploy设置，在repo处粘贴你github上博客代码库的链接即

  2. 执行下列命令

    1
    $ hexo d -g（或`$ hexo d -g`）

  3. 嘻嘻嘻嘻，激动人心的时候到啦~，在浏览器地址栏中输入你的github博客的域名（即https://username.github.io/），就可以看到你刚刚在本地看到博客的模样啦~

五、管理博客

  1. Hexo如何在线可视化写博客？

  2. 博客后台管理插件

    hexo admin ： https://jaredforsyth.com/hexo-admin/
    相关介绍可以参考博文 http://yeshaoting.cn/article/hexo/hexo%E4%BD%BF%E7%94%A8%E8%BF%9B%E9%98%B6/

  3. 配置主题

    有哪些好看的 Hexo 主题? - 知乎
    把喜欢的主题项目clone下来，放在根目录的themes文件夹中，在_config.yml修改theme名称，即clone下来的代码库名称

最后最后，如有错误欢迎指出~ 转载请注明本文地址