美文网首页程序员
手把手教你搭 Hexo 博客

手把手教你搭 Hexo 博客

作者: Eaton_Lee | 来源:发表于2018-05-05 18:38 被阅读50次

    本人前端小白加学生党一枚,大二才真正开始学习前端知识。因为所学太多,而我记性又不好,所以打算搭建一个blog来记录所学。
    那为什么要选择Hexo呢?原因如下:

    1. 风一般的速度。
      Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成。
    2. 流畅的撰写。
      支持GitHub Flavored Markdown和所有Octopress的插件。
    3. 扩展性。
      Hexo支持EJS、Swig和Stylus,并通过插件支持Haml、Jade和Less。

    那么接下来,我们就开始讲解Hexo的搭建过程。

    搭建环境准备

    安装Node.js

    打开Node.js中文官网http://nodejs.cn/,根据你的系统版本下载相应的安装文件,然后一路默认安装即可。

    安装Git

    打开该网址https://git-for-windows.github.io/,然后根据你的系统版本下载相应Git Bush。

    申请GitHub账号

    打开GitHub官网https://github.com/,申请其账号,并配置好SSH(关于如何配置SSH,详见我的另一篇博客)。

    至此,Hexo前期准备工作完成!

    搭建Hexo

    安装

    新建一个文件夹,cd进这个文件夹,输入下面的命令来进行安装。

    npm install hexo -g
    

    升级(非必需)

    更新hexo到最新版。

    npm update hexo -g
    

    初始化

    在文件夹里右键,点击Git Bush,输入下面的命令。

    hexo init
    

    生成网站

    hexo generate
    

    或者

    hexo g
    

    本地服务器调试

    在CMD里输入下面的命令。

    hexo server
    

    或者

    hexo s
    

    不出意外,伺服器会跑在 http://localhost:port (port 预设为 4000,可在 _config.yml 设定),打开之后,就能看到Hexo的原始页面啦。

    上传GitHub与Coding

    建立仓库

    在GitHub上建立一个仓库,其名称必须为your_name.github.io,比如我的是 Doenitz.github.io。同理,在Coding上建立一个仓库,其名称最好为your_name,比如我的是 hitler97。

    配置文件

    打开根目录下的_config.yml,找到Deployment,然后按照如下修改:

    deploy:
      type: git
      repository:
        github: git@github.com:your_name/your_name.github.io.git
        coding: git@git.coding.net:your_name/your_name.git
        branch: master
    

    比如我就按以下形式配置:

    deploy:
      type: git
      repository:
        github: git@github.com:Doenitz/Doenitz.github.io.git
        coding: git@git.coding.net:hitler97/hitler97.git
        branch: master
    

    编写、发布文章

    打开Git Bush,新建一篇文章:

    hexo new "article title"
    

    这时候在博客目录 \hexo\source\ _posts 下将会看到 article title.md 文件,用MarkDown编辑器编辑好文章之后即可发布文章:

    hexo g    //  生成
    hexo d    //  部署
    

    或者

    hexo g -d
    

    这时打开你的Github pages和Coding pages主页地址即可看到自己的博客。

    相关文章

      网友评论

        本文标题:手把手教你搭 Hexo 博客

        本文链接:https://www.haomeiwen.com/subject/pveerftx.html