美文网首页Hexo关于hexo
用 Hexo 搭建个人博客-01:6 步初体验

用 Hexo 搭建个人博客-01:6 步初体验

作者: 苏尚君 | 来源:发表于2016-08-15 23:06 被阅读437次

    1. 前期准备工作

    1.1 Git

    以 Ubuntu 为例:

    $ sudo apt-get install git
    

    1.2 node.js

    Debian/Ubuntu 参考官方指导

    # Using Ubuntu
    $ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
    $ sudo apt-get install -y nodejs
    
    # Using Debian, as root
    $ curl -sL https://deb.nodesource.com/setup_6.x | bash -
    $ apt-get install -y nodejs
    

    RHEL 系列参考这里

    有时敲入 npm,系统反馈「/usr/bin/env: ‘node’: No such file or directory」,怎么办?解法(之一)来自 run npm command gives error "/usr/bin/env: node: No such file or directory"

    $ sudo ln -s /usr/bin/nodejs /usr/bin/node
    

    1.3 然后

    $ npm install -g hexo-cli
    

    2. 建站:Setup

    按照提示,我先创建了一个名为 blog 的文件夹作为根目录:

    $ cd blog
    $ hexo init blog
    

    或者先建立文件夹,然后进入该文件夹中 init,即:

    $ mkdir blog
    $ cd blog
    $ hexo init
    

    3. 初次尝试

    打开 _config.yml,对 titlesubtitledescription 等几个简单字段略作修改;然后参考这里,首先在命令行中键入下述命令:
    (以后每次修改完毕要在本地重新查看,都可以这样做)

    $ hexo clean
    $ hexo s -g
    

    然后打开 http://localhost:4000/ 查看初步效果

    firstPage

    4. 主题选择初体验

    Hexo Themes页面上一番点击,最后锁定了 2 个主题:

    看了一下,觉得 Flexy 的配置似乎会更复杂一些(虽然语法看着不复杂),还是决定先从看上去更简单的 Daily 开始上手

    4.1 Daily 配置过程

    在根目录(即 blog 文件夹下)用命令行输入

    $ git clone https://github.com/GallenHu/hexo-theme-Daily.git themes/Daily
    $ npm install --save hexo-renderer-sass
    

    然后更改根目录下的 _config.yml 为:

    theme: Daily
    

    再次于命令行中键入下述命令并查看效果:

    $ hexo clean
    $ hexo s -g
    
    firstTheme-Daily

    5. 文章发布初体验

    5.1 新建文章

    参考这里,键入下述命令,创建名为 test 的文章,并到 http://localhost:4000 查看效果:

    $ hexo new "test"
    $ hexo clean
    $ hexo s -g
    
    newPost-test-01 newPost-test-02

    5.2 删除文章

    只要删除 source/_posts/ 中的 .md 文件,重新执行下述命令即可:

    $ hexo clean
    $ hexo s -g
    

    5.3 创建草稿

    有时候想先写部分草稿,但不想显示在页面上,存在别的地方又怕忘记,怎么办?Hexo 提供了「草稿」功能

    创建草稿(实际上这里的 draft 可换成其他 layout 值):

    $ hexo new draft <title>
    

    发布草稿:

    刚刚提到了 Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。

    $ hexo publish [layout] <title>
    

    查看草稿:

    $ hexo --draft
    

    6. 初次部署

    第一,在 GitHub 上创建一个新仓库,并命名为 blog_name.github.io,其中 blog_name 替换成你想要的任何名字。部署到网上时,这个仓库名即为博客的 URL。

    第二,根据文档,首先在博客根目录下安装 hexo-deployer-git

    $ npm install hexo-deployer-git --save
    

    第三,修改 deploy 字段为:

    deploy:
      type: git
      repo: <Git URL for your blog>
      branch: <branch name>
    

    第四,输入下述命令中的前 2 条,本地检查无误后, Ctrl + C 退出,并执行第 3 条命令部署到 GitHub 上:

    $ hexo clean
    $ hexo s -g
    $ hexo deploy
    

    这里说明一点:我的试验结果表明,部署时 repo 字段可用 https 链接,而不一定非得要 SSH 链接(与这篇文章所说不符)

    7. 另一种部署方式

    直接生成静态文件,然后将静态文件拷贝到 GitHub Pages 仓库中即可:

    $ hexo clean
    $ hexo generate
    $ cp -r public/* $PATH_TO_GIT_REPO
    

    Q&A

    1. 在修改配置文件,例如根目录下的 _config.yml 时,一定要记得:变量与值之间有 1 个半角空格,例如这样是对的 title: Labs4SuShangjun,而这样是错的 title:Labs4SuShangjun

    2. 有时候可能会出现 Bus error(core dump)

      • 重启/重装 hexo 均无法解决该问题,甚至直接敲击 hexo 都是返回该结果
      • 尝试返回上级目录,输入命令 hexo,发现并没有出现该问题
      • 因此,估计是该文件夹有问题。备份重要的配置文件例如 config.yml,然后删除并重新部署即可解决问题

    参考文档

    1. npm - getting started
    2. Hexo 文档(中文)
    3. [hexo]如何搭建Hexo博客并部署到Github
    4. Hexo搭建Github静态博客
    5. 史上最详细“截图”搭建Hexo博客并部署到Github

    相关文章

      网友评论

        本文标题:用 Hexo 搭建个人博客-01:6 步初体验

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