Hexo+GitHub傻瓜式搭建个人博客 - Angel's Blog.

ing
 
 
软件开发,程序设计,前端设计
 
 
首页 > code, share > Hexo+GitHub傻瓜式搭建个人博客

Hexo+GitHub傻瓜式搭建个人博客

 
好久没有折腾东西了, 十一长假也没闲着, 因为OpenShift V2停止服务, 不得不把以前的wordpress代码和所有数据备份迁移, 在寻找免费空间的过程中, 无意间发现Hexo这种神一般存在的程序;
正如Hexo官方网站所描述: 
  “快速、简洁且高效的博客框架”
  ⚡️超快速度:
    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  ☁️一键部署:
    只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
  ✏️支持 Markdown:
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  ?丰富的插件:
    Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。

简单的用了一下这个东西, 还是非常适合开发人员使用的博客程序, 当然你可以理解它就是一个对外发布静态页面|资源, 同步markdown的写作工具.
好了, 那么这个东西部署起来是否很折腾人?
对于第一次安装还是有一点折腾, 不过还好, 为了解决这个痛点, 我花了半天左右的时间搞定了一个针对bash环境(目前只支持Mac OSX系统)的傻瓜式安装bash/shell脚本(以下称呼为安装脚本), 近期会增加Linux版本.
这个项目目前已经放在了我的GitHub主页, 喜欢或者对此项目有意见的, 欢迎Star或者Fork.

项目地址:

https://github.com/gb-2312/hexo-installer-for-bash

使用方式:
  git clone https://github.com/gb-2312/hexo-installer-for-bash.git ;
  cd hexo-installer-for-bash ;
  sh hexo-installer-for-macos.sh ;

目前安装脚本已经实现如下功能:
  1)每次修改的source|scaffolds|主题等核心文件夹和文件(排除`.gitignore`忽略的文件列表), 同步到`hexo`分支, 用于多设备(不同的PC)方式的写作;
  2)每次修改生成的静态页面|CNAME|404.html|资源文件等, 同步到`master`分支.

关于2)这部分的说明:
  这里的实现, 使用了hexo-deployer-git插件, 请参考生成的博客目录的_config.yml文件 - deploy: 配置属性;
  也就是说, 每次修改文件|资源|CNAME等文件, 执行 `hexo generate -d ;` 都会同步到你设置的远程repo-master分支中, 这里使用的是GitHub.

那么, 除了脚本以外, 我还需要做哪些工作呢?
下面我先放一张导图, 然后你就清楚是怎样的一个工作流程.
  [流程图暂缺, 稍候补上]

流程图有了, 大概的流程应该已经在脑海里转了一圈, 下面再介绍执行脚本前的工作:
1)本地环境要求:
  1]node.js, Hexo主程序的运行时环境, 下载地址: `https://nodejs.org/en/`, 找到最新版本即可, Mac OSX系统直接下载对应的pkg即可傻瓜式的安装node.js运行时;
  2]git终端命令行, Mac系统自带, 无需额外安装, 如果无, 下载地址: `https://git-scm.com/downloads`;
  3]sublime|vim等文本编辑器|IDE, 这个就不用多说了吧(讲道理这个不应该罗列到这里了, 但考虑新手小白不晓得用编辑器修改文件);
  上述的1]和2]安装完毕, 分别执行npm -v ; git --version ; 检查看是否已经安装成功;
  4]生成本地的~/.ssh/id_rsa.pub, 如果本地已有了公钥, 请忽略, 如果本地没有, 则执行ssh-keygen, 按照提示生成即可.

2)远端GitHub仓库项目在页面的创建和设定:
  0]如果没有GitHub.com的帐号, 请自行注册; 已有GitHub.com帐号, 请先登录才可以进行以下的操作;
  1]点击右上方的头像`倒三角`图标, 会展开一个菜单, 点击Settings, Personal settings - SSH and GPG keys - 点击New SSH key(也可以访问此地址: https://github.com/settings/keys);
  settings
  这一步是为了设置提交到远端Repository的客户端免登录的公钥, 免去每次输入密码的麻烦; 将本地已有的`~/.ssh/id_rsa.pub`复制出来, 并粘贴到如图:
    paste_pub_key_tips
  Title也填写好后, 点击绿色的Add SSH Key按钮保存; 如果成功, 则在终端执行bash/shell命令行:
    ssh -T [email protected] ;
  如果远端GitHub页面填写本地的公钥信息正确无误, 成功的提示如下:
    Hi xxx(GitHub用户名)! You've successfully authenticated, but GitHub does not provide shell access;
  2]创建新的repository(New repository), Repository name格式一定要设定为`你的GitHub用户名.github.io`, 也就是你的资料卡里的`Signed in as xxx`;
    eg: 我的GitHub用户名: abcdefg, 那么创建的这个Repository name为: abcdef.github.io (注意: 这里不要追加任何http://, https:// 协议前缀和端口号);
    new_repo
    pre_create_new_repo
  3]填写确认无误后, 点击下方绿色`Create repository`按钮, 提示你创建成功, 并跳转到初始化该仓库的提示bash/shell命令, 到此为止, 远端GitHub仓库项目已经有了;
  4]我们的脚本该出场了, 但是等等... 还没完事, 在使用我们的脚本的时候, 有一步是填写对应提交到GitHub的邮箱帐号信息(也就是`~/.gitconfig`文件的`email`字段), 需要注意一下此字段, 如果你的GitHub设置的个人资料邮箱为私有, 怎么查看? Personal settings - Emails - Keep my email address private ;(也可以访问此地址: https://github.com/settings/emails), 如果设置私有的话, 就不能填写这个邮箱地址了, 当然你可以简单粗暴的填写一个邮箱地址:
    格式为: 
      [email protected]
  上述没问题了, 就可以用脚本愉快的安装Hexo到本地+部署到远端GitHub仓库;
  需要说明一下, 脚本有一处执行需要sudo权限, 就是安装Hexo主程序, 编译安装到`/usr/local/bin/`和`/usr/local/lib/node_modules/hexo-cli/`, 否则就会安装失败!

3)Hexo的基础功能:
  部署成功后, 你肯定会考虑写作, 修改一些markdown文件, 新建页面, 静态资源文件等操作, 这个时候, 需要知道一些最基础的bash/shell命令行;

  0]# 新建(可选): {
    # hexo new 布局 "文章名"
    # 布局    解释    路径        注释
    # post  文章    source/_posts  新建一个文章文件
    # draft  草稿    source/_drafts  新建一个草稿文件
    # page  页面    source    新建一个页面文件

    #
    # eg:
      # 新建一篇普通的文章:
        hexo new post 对不起我来晚了
    # 终端会提示你生成该文件的目录, 生成的markdown(.md)文件, 可以使用sublime|vim等文本编辑器进行编辑写作.
  # }

  1]# 本地查看效果(可选): {
    hexo server ;
    # 或者执行 hexo --debug ;
  # }

  2]同步本地的hexo分支文件到远端的hexo分支:
    # 本地markdown和编译文件上传到`hexo`分支, 方便多台电脑的写作, 
    # 需要注意, 每次(撰写|修改|删除)-(文章|页面|主题|资源), 都需要执行以下的操作:
    # 提交source 到 hexo分支 START
    git add . ;
    git commit -m "blog source commit" ;
    git push origin hexo ;

  3]重新生成渲染的静态页面, 同步最新的资源文件, CNAME设定等:
    # 需要注意, 每次(撰写|修改|删除)-(文章|页面|主题|资源), 都需要执行以下的操作:
    hexo clean ;
    hexo generate -d ;

  4]一些核心的配置文件:
    本地{github_username}.github.io根目录下结构:
      themes      主题目录, 第三方主题都放置在此
      db.json
      public       生成的静态页面|资源
      source      markdown等文章|页面文件
      package.json
      _config.yml   Hexo核心的配置文件, 包括开启主题, 域名信息, 博客信息, 同步静态页面|静态资源到远端master等设定.
      node_modules   本地编译node的Hexo所需插件, 如果其他PC重新clone远端hexo分支进行跨PC写作撰写和正常的生成渲染, 执行`git clone -b hexo https://github.com/{github_username}/{github_username}.github.io.git `, 且执行安装hexo的本地主程序`sudo npm install -g hexo-cli ;`, 然后再手动切换到本地{github_username}.github.io目录, 然后执行`npm install ;`, 将自动下载`package.json`中的依赖模块.
      README.md
      scaffolds    布局模板
    hexo分支默认忽略的文件列表: `.gitignore`
      .DS_Store
      Thumbs.db
      db.json
      *.log
      node_modules/
      public/
      .deploy*/

这片博文主要介绍了Hexo的简单工作流程, 怎么使用hexo的安装脚本, 以及怎么简单的编辑, 发布文章, 希望能给大家减少一些不必要的折腾, enjoy!
或者通过RSS 关注本站的更新 ^ O ^ 。” —  by  转载请注明:来自 Angel's Blog.
本文永久链接: http://www.0ee.com/2017/10/09/hexo-installer-for-blogging.html
 
分类: code, share标签:
 
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
 

 
评论 (1) Trackbacks (0)
发表评论 Trackback
 
1 Comments Contributed by Visitors
  1.     水墨 2017年11月23日09:46 1#

    虽然博客的兴盛时代已经过去,但是博客依然沉淀着一批忠实用户 :idea:

Leave Comments Here...

:) :-D :( :-o 8-O :-? 8) lol :-x :-P oops cry evil twisted wink ? idea :-| arrow mrgreen roll !

(required)

(required)

网址随您("http://"可以省略)

(Ctrl+Enter)

  • 本站不会泄露您的 Email 地址, 敬请放心.
  • 本站已开启缓存, 请不要重复提交评论.
  • 请注意: 带有 《广告(链)、不健康、或者 产品名字》 的评论一律视为spam.
  • 支持常用 HTML 标签调用, 插入 HTML 标签需注意: < == &lt;> == &gt;.
  • 仅当某人针对您的评论做出回应时, 您才会收到由本站发出的邮件通知.
  • 如您希望以相同方式通知某位网友, 请点击  按钮进行回复.
  • 允许在评论中使用如下代码: 
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> 
    <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 
    .
  • 鼠标悬浮到评论中的 @someone 区域即可自动显示 someone 的评论内容.
 
 
  • 正在加载...