README

如何在coding上用HEXO搭建个人博客

一.准备工具

1.Git

  • Windows:下载并安装 git.
  • Mac:使用 Homebrew, MacPorts :brew install git;或下载 安装程序 安装。
  • Linux (Ubuntu, Debian):sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):sudo yum install git-core

    • Mac 用户
      您在编译时可能会遇到问题,请先到 App Store 安装 Xcode,Xcode 完成后,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。

    • Windows 用户
      由于众所周知的原因,从上面的链接下载git for windows最好挂上一个代理,否则下载速度十分缓慢。也可以参考这个页面,收录了存储于百度云的下载地址。

2.Node.js

安装 Node.js 的最佳方式是使用 nvm。

  • cURL:

    1
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
  • Wget:

    1
    $ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
  • 安装完成后,重启终端并执行下列命令即可安装 Node.js。

    1
    $ nvm install stable
  • 或者您也可以下载安装程序 来安装

    • Windows 用户
      对于windows用户来说,建议使用安装程序进行安装。安装时,请勾选Add to PATH选项。
      另外,您也可以使用Git Bash,这是git for windows自带的一组程序,提供了Linux风格的shell,在该环境下,您可以直接用上面提到的命令来安装Node.js。打开它的方法很简单,在任意位置单击右键,选择“Git Bash Here”即可。由于Hexo的很多操作都涉及到命令行,您可以考虑始终使用 Git Bash来进行操作。

3.Coding

Coding可以说,就是国产的Github,但是,有一个功能使它似乎超越了GitHub,那就是 Web IDE。

Coding WebIDE 是 Coding 自主研发的在线集成开发环境 (IDE)。用户可以通过 WebIDE 创建项目的工作空间, 进行在线开发, 调试等操作。同时 WebIDE 集成了 Git 代码版本控制, 用户可以选择 Coding、GitHub、BitBucket、Git@OSC 等任意的代码仓库。 WebIDE 还提供了分享开发环境的功能, 用户可以保存当前的开发环境, 分享给团队的其他成员。

摘抄自 Coding WebIDE官网

二.步骤

  1. 创建项目
    你需要在 Coding 上面新建一个项目,项目名称一定要是 用户名.coding.me,因为hexo只能弄在根目录上,这样它内置的文件引用目录才能都正确。
    填写项目名称、描述、设置属性、初始化文件,最后点击“创建项目”这里写图片描述

  2. 接着,我们传送到Coding WebIDE,单击“+ 新建工作空间”。这里写图片描述

  3. 随后,单击“同步仓库”,等待同步仓库完成。这里写图片描述

    • webIDE是部分收费的,但是不用着急,官方提供了一些方式免费获得其网站虚拟币——码币,且Coding在注册后会送给用户一些码币,足以让IDE跑起来啦 这里写图片描述
  4. 言归正传,我们创建IDE。配置不变,直接鼠标拉到最底下,单击“创建”,这时候,空间创建完毕,点开创建完成的工作空间。这里写图片描述

  5. Hexo是基于Nodejs的,所以我们将右侧“运行环境”切换为Nodejs。这里写图片描述单击“使用”后,再单击确定。下面,我们单击左下方“终端”来打开终端

  6. 进入正式安装步骤,首先,我们在终端中输入
    sudo npm install -g hexo-cli

    安装进程,就会全自动完成。安装结果如下图,安装就成功了这里写图片描述

  7. 接着,我们创建一个文件夹用于存放文章与设置。
    mkdir hexo

  8. 然后,使用init命令初始化博客。
    cd hexo
    sudo hexo init
  9. 初始化进程需要安装一些辅助插件,所以比安装的时候慢,需要耐心等待…等待初始化进程完成后,安装进程就正式完成啦~

  10. 我们首先先解锁一下配置文件(将所有文件提权至777)
    sudo chmod -R 777 *

  11. 接着,我们可以暂时关闭终端,编辑一下博客的设置,依次打开文件树中的目录:项目名->hexo->_config.yml 这时,我们就可以在编辑窗口中编辑属性:
    title为标题,subtitle小标题【可不填】,author作者,language语言【可不填】,timezone时区【可不填】。【注意:每个冒号:后面都要有一个空格!】
    我做了如下修改:

    1
    2
    3
    4
    5
    6
    7
    # Site
    title: SUMMER
    subtitle: summer`s blog
    description: welcome to my blog
    author: summer
    language:
    timezone:

    修改完成之后别忘了保存。CTRL+S保存

  12. 接着我们可以使用以下命令来开启本地服务器:
    hexo server
  13. 然后,我们就可以通过单击右上角的访问链接,将端口设置为4000来访问网站。这里写图片描述
  14. 测试成功了,那么我们先在终端中按Ctrl+C退出,然后按下访问链接中的垃圾桶来销毁端口。那么大家刚才也看到了,IDE中的访问链接是测试用途,而且有时间限制,一看就非常不严谨,所以,我们要学会把博客Push到托管平台中。那么首先,我们要安装Hexo Git插件才可以将静态页推送到托管平台上。
    sudo npm install hexo-deployer-git --save
  15. 安装完成之后,我们配置一下_config.yml文件。修改一下最下面的deploy:

    1
    2
    3
    4
    5
    deploy:
    type: git
    repo: [仓库地址]
    branch: master
    message: blog update

    注:仓库地址可以在您的项目主页找到。这里写图片描述

    我填入了repo:

    1
    2
    3
    4
    5
    6
    7
    8
    deploy:
    #我们是使用 git 来部署的。
    type: git
    # git仓库的地址。
    repo: https://<your_user_name>:<your_password>@git.coding.net/summerwait/summerwait.coding.me.git
    # 分支名称。
    branch: master
    message: blog update
  16. 随后,我们就可以将博客推送到代码托管平台了,在终端中使用这个命令:
    sudo hexo deploy

    和往常的推送操作一样,终端会要求用户输入用户名与密码。但是我们的repo中把用户名密码都填好了,所以按我这样配置repo就不会让你再输入用户名密码了这里写图片描述
    推送成功

  17. 下面,我们开启静态页服务(Pages)。

    只需要单击页面上的“Pages服务”,设置部署来源为master分支,然后单击“保存”,就可以访问啦! 现在去访问试试吧。这里是我的地址,欢迎来访~

三.添加、删除、编辑文章

  1. 创建文章

    打开终端,以如下格式敲入命令:

    1
    sudo hexo new <文章名称>

    这样,我们就创建了一篇文章。

    可以在目录source->_posts中找到,并编辑【PS:文章名称为文章的英文名,不能是中文,中文名可以在Markdown文件中设置】。

    这里,我创建了一篇名称为README的文章:

    在编辑这篇文章之前,我们需要对文件进行提权:

    1
    2
    cd source/_posts
    sudo chmod -R 777 *
    • 一定有人跟我有一样的困惑,这条提权命令怎么理解。我找来告诉大家。
      1
      2
      3
      4
      5
      chmod:在linux系统中它用于改变文件或目录的访问权限。用户用它控制文件或目录的访问权限。
      参数-R : 对目前目录下的所有档案与子目录进行相同的权限变更(即以递回的方式逐个变更) 。
      777:这三个7分别对应文件实际拥有者(u)、文件实际拥有者所在的组(g)、其它用户(o)的权限,数字权限是基于八进制数字系统而创建的,读权限(read,r)的值是4,写权限(write,w)的值是2,执行权限(execute,x)的值是1,没有授权的值是0。
      *:通配符,指当前目录下的所有文件及目录。
      最终这条命令的意思:将当前目录下的所有文件及子目录的文件拥有者权限设置为读、写、可执行,文件拥有者所在的用户组成员具备读、写、可执行权限,其它用户也具备读、写、可执行权限。

    随后,我们可以先设置标题、发布日期以及标签。

    接着,使用Markdown语法在编辑内容;

    完成之后,我们需要更新博客,再次推送到代码托管平台:

    1
    sudo hexo generate --deploy

    再次访问就可以看到新的文章啦~

  2. 删除文章

    删除文章的方法很简单。
    删除之后使用更新博客命令,就可以看到效果。

    1
    sudo hexo generate --deploy
  3. 更新文章

    只需要修改文章内容,然后使用同上命令更新发布即可:

    1
    sudo hexo generate --deploy

参考资料:

1.Hexo文档

2.使用Coding.net来搭建基于Hexo的免费博客(一)