IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    使用GitHub和Hexo搭建免费静态Blog

    shendao发表于 2017-03-26 13:40:20
    love 0
    使用GitHub和Hexo搭建免费静态Blog

    前言

    习惯自己写Blog的朋友一定不会陌生Wordpress，或许也曾在新浪博客和QQ空间留过脚印，但静心认真思考一下，似乎我们又总是向往更加简单自由的写作方式。GitHub给我们提供了一个无限的空间，我们需要珍惜使用，而Hexo的出现从某种意义上来说代替了Jekyll，让我们可以更专注于写作本身。

    喜欢写Blog的人，会经历三个阶段。
    第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。
    第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。
    第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

    大多数Blog作者，都停留在第一和第二阶段，因为第三阶段不太容易到达：你很难找到俯首听命、愿意为你管理服务器的人。

    但是六年前，情况出现变化，一些程序员开始在GitHub网站上搭建blog。他们既拥有绝对管理权，又享受GitHub带来的便利—-不管何时何地，只要向主机提交commit，就能发布新文章。更妙的是，这一切还是免费的，GitHub提供无限流量，世界各地都有理想的访问速度。

    今天，我就来示范如何在GitHub上搭建Blog，你可以从中掌握GitHub的Pages功能，以及Hexo软件的基本用法。更重要的是，你会体会到一种建立网站的全新思路。

    概要

    GitHub Pages 是什么？

    如果你对编程有所了解，就一定听说过GitHub。它号称程序员的Facebook，有着极高的人气，许多重要的项目都托管在上面。
    简单说，它是一个具有版本管理功能的代码仓库，每个项目都有一个主页，列出项目的源文件。

    但是对于一个新手来说，看到一大堆源码，只会让人头晕脑涨，不知何处入手。他希望看到的是，一个简明易懂的网页，说明每一步应该怎么做。因此，GitHub就设计了Pages功能，允许用户自定义项目首页，用来替代默认的源码列表。

    所以，GitHub Pages可以被认为是用户编写的、托管在GitHub 上的静态网页。

    GitHub 提供模板，允许站内生成网页，但也允许用户自己编写网页，然后上传。有意思的是，这种上传并不是单纯的上传，而是会经过Hexo或Jekyll等程序的再处理。

    什么是Hexo？

    Hexo 是一个快速、简洁且高效的基于Node.js的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。作者是来自台湾的@tommy351。

    A fast, simple & powerful blog framework, powered by Node.js.

    类似于jekyll、Octopress、Wordpress，我们可以用Hexo创建自己的博客，托管到github、Heroku或Coding上，绑定自己的域名，用markdown写文章。本博客即使用hexo创建并托管在github上。

    为什么要用hexo

    不可思议的快速 ─ 只要一眨眼静态文件即生成完成
    支持 Markdown
    仅需一道指令即可部署到 GitHub Pages 和 Heroku
    已移植 Octopress 插件
    高扩展性、自订性
    兼容于 Windows, Mac & Linux

    • 易用。不仅部署简单，平时使用中仅需要hexo new hexo generate hexo server hexo deploy四个命令。不像Jekyll需要很多繁琐的git命令。
    • 轻。文件少、小，易理解，方便自定义。
    • 用户多。虽然赶不上Jekyll和Octopress，但遇到什么问题都能搜索到答案，或者找到同样使用hexo的用户进行参考和咨询。

    谁能使用hexo

    这是一个免费开源的博客程序，任何人都可以使用和修改。但是不同于wordpress，hexo由于需要使用Github,Git,Markdown,Node.js这样的工具，好多插件、widget都需要自己安装、设置。所以适合那些有一定计算机基础，喜欢折腾的人。但是，不要恐惧，只要跟着本教程走，就能很方便地让自己的博客”飞起来”。

    怎样搭建hexo博客

    正题来了，请认真往下看吧。

    准备工作

    注意本文主要针对Windows平台和Hexo 3.x

    安装GIT

    下载 Git 并执行即可完成安装。
    So Easy

    安装Node.JS

    在 Windows 环境下安装Node.js非常简单，仅须下载Node.JS并执行即可完成安装。
    So Easy

    安装Hexo

    在任意位置右键，选择Git Bash Here

    npm install hexo-cli -g #如果命令无法运行，可以尝试更换taobao的npm源 npm install -g cnpm --registry=https://registry.npm.taobao.org

    Hexo初始化配置

    创建hexo文件夹

    安装完成后，根据自己喜好建立目录(如D:/hexo)，在该文件夹下右键–Git Bash Here。执行以下命令

    hexo init

    安装依赖包

    npm install

    该命令会将hexo所需文件自动下载到hexo文件夹下。

    #新建完成后，指定文件夹的目录如下 . ├── _config.yml ├── package.json ├── scaffolds ├── scripts ├── source |      ├── _drafts |      └── _posts └── themes

    安装Hexo插件(可选)

    npm install hexo-generator-feed --save npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save npm install hexo-generator-json-content --save npm install hexo-deployer-git --save npm install hexo-generator-index --save npm install hexo-generator-archive --save npm install hexo-generator-category --save npm install hexo-generator-tag --save npm install hexo-server --save npm install hexo-deployer-heroku --save npm install hexo-deployer-rsync --save npm install hexo-deployer-openshift --save

    查看本地运行效果

    现在我们已经搭建起本地的Hexo博客了，继续执行以下命令(在D:/Hexo)，成功后即可登录localhost:4000查看效果，运行显示了相关页面，说明当前网站已经在本地建立。

    hexo generate hexo server

    好了，至此，本地博客已经搭建起来了，只是本地哦，别人看不到的。下面，我们要部署到Github。

    配置GitHub

    注册Github账号

    已有账号可以跳过，没有的，请登录GitHub进行注册，很简单，这里就不介绍了。

    创建repository

    在自己Github主页右下角，创建New repository。
    比如我的Github账号是vioren，那么我应该创建的repository名字应该是vioren.github.io。
    首次创建耐心等待10分钟左右审核，之后即可访问静态主页如http://vioren.github.io

    配置部署

    编辑_config.yml(在D:/hexo下)。你在配置时，要把下面的vioren都换成你的账号名。

    deploy:    type: git   repository: https://github.com/vioren/vioren.github.io.git   branch: master

    注意：type:空格git。都要使用空格，否则会出错。

    配置本机的ssh key

    通过ssh keys就可以将本地的项目与Github关联起来

    检查本机ssh key

    cd ~/.ssh

    提示：没使用过Git就会显示：No such file or directory

    生成新的ssh keys

    $ ssh-keygen -t rsa -C "邮件地址@youremail.com" Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>

    注意：-C为大写的C接下来会让你输入密码

    Enter passphrase (empty for no passphrase):<输入加密串> Enter same passphrase again:<再次输入加密串>

    注意：输入密码时是不会显示密码的，依次输入就好了如果显示为下界面，就说明设置ssh key成功了

    使用GitHub和Hexo搭建免费静态Blog

    添加ssh key到Github

    1. 搜索本机上的id_rsa.pub文件。或在C:/Users/用户名/.ssh路径下找到该文件，以记事本打开，复制其中的内容。
    2. 进入自己的Github，右上角齿轮setting—左边列表SSH keys—Add SSH key。将内容复制到文本框（不用取title名字）。
      注意：这时Github会给你的邮箱发送一封邮件，打开邮件确认下就好了。

    测试通信

    ssh -T git@github.com

    如果是以下反馈

    The authenticity of host 'github.com (207.97.227.239)' can't be established. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Are you sure you want to continue connecting (yes/no)?

    输入yes

    Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.

    这时候说明能够通过SSH链接到你的Github了，接下来完善一下你的个人信息。Git会根据用户的名字和邮箱来记录提交。
    GitHub也是用这些信息来做权限的处理，输入下面的代码进行个人信息的设置，把名称和邮箱替换成你自己的，名字必须是你的真名，而不是GitHub的昵称。

    git config --global user.name "Tim" #用户名 git config --global user.email "tim@gmail.com" #填写自己的邮箱

    使用Hexo克隆主题

    自己使用的是Yilia主题，比较喜欢，以这款主题为例。

    克隆主题

    git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

    配置

    修改hexo根目录下的_config.yml：

    theme: yilia

    更新

    cd themes/yilia git pull

    本地查看

    hexo g hexo s

    浏览器输入localhost:4000，查看主题是否成功。

    部署上传

    hexo clean hexo g hexo d

    会让你输入用户名和密码，依次输入就好。

    部分Hexo主题推荐

    选择主题建议遵循KISS原则

    Hexo Themes –http://hexo.io/themes/
    Themes · hexojs/hexo Wiki – https://github.com/hexojs/hexo/wiki/Themes

    Yilia –http://litten.github.io/2014/08/31/hexo-theme-yilia/
    Jacman –http://wsgzao.github.io/post/hexo-jacman/
    NexT – http://theme-next.iissnan.com/

    绑定域名和DNS设置

    设置CNAME

    • 打开Github–空间Repository的根目录下–点击“+”creat a new file–命名为CNAME，文本框中输入自己需要绑定的域名如vioren.space。
    • 点击右下角的【Download ZIP】,下载项目，解压压缩包，将其中的CNAME文件复制到hexo根目录下。 
      hexo g hexo d

    DNS设置

    注册登录DNSPod，先添加域名，然后添加记录，设置如下

    主机记录 记录类型 线路类型 记录值 MX优先级 TTL
    @ CNAME 默认 vioren.github.io. – 10
    www CNAME 默认 vioren.github.io. – 10

    域名推荐

    GoDaddy makes registering Domain Names fast, simple, and affordable.
    【推荐理由】两个字“靠谱”，支持支付宝，附优惠码链接
    http://www.godaddy.com
    http://www.gdcodecoupon.com

    –

    万网
    【推荐理由】被阿里收入麾下，实力和价格都不错
    https://wanwang.aliyun.com

    DNS推荐

    致力于为您提供最稳定、最安全的域名解析服务
    【推荐理由】依然是两个字“靠谱”，被腾讯收入麾下以后扔不忘初心，感谢他们一直以来对于公益的坚持
    https://www.dnspod.cn

    开始写文章

    hexo new "postName"

    或路径D:/hexo/source/_posts下新建文件postName.md就可以了
    文章内容和格式如下：

    --- title: 标题 date: YYYY-MM-DD hh:mm:ss tags: 标签                    #多标签时以[tag1,tag2]格式填写 categories: 类别              #多类别时以[category1,category2]格式填写 --- 主页可显摘要 <!-- more -->                #阅读全文分隔符 展开余下全文

    正文内容使用Markdown语法进行书写

    图床推荐

    七牛云
    【推荐理由】体系完善，操作简便易懂
    测试用户每月1G流量，实名后每月10G，小站够用。
    需要注意的是未备案网站无法使用CDN，存在盗图和恶意刷流量的可能，而且七牛是先使用后付费，自己领悟吧。
    http://www.qiniu.com

    –

    Simple Free Image Hosting
    【推荐理由】免费，强大，无限制，用了都说好
    缺点：后期无法对上传的图片进行管理
    https://sm.ms
    说明：https://www.v2ex.com/t/182703

    其他相关

    常见问题

    1. 修改配置文件时注意YAML语法，参数冒号:后一定要留空格
    2. 中文乱码请修改文件编码格式为UTF-8

    Error代码:「warning: LF will be replaced by CRLF」
    在hexo deploy时，有时会出现这个提示信息warning: LF will be replaced by CRLF，虽然看起来挺乱糟糟的，但不影响使用，可以忽略不计。若想不提示，可以使用如下方法：

    1. 切换到博客的根目录，执行如下命令：git config --global core.autocrlf false
    2. 删除掉该目录下的.git文件夹（可能是隐藏的），命令：rm -rf .git
    3. 重新git init。

    再deploy试试吧，清新脱俗了。

    Error代码:hexo deploy 没反应
    好多网友遇到过这个问题，目前来看，主要问题出在config.yml的deploy配置上。注意缩进，同时注意冒号后面要有一个空格。
    Error代码:hexo update -g 升级错误，hexo命令失效
    我升级时遇到了这个问题，原因不详。这种情况下，可执行npm install hexo-cli -g重新安装一遍Hexo，效果跟升级一样。
    Error代码:hexo指令无法执行
    可能是升级方法不对，导致hexo generate指令也无法执行，后来索性重装了git和node，重新安装hexo，generate和server指令都能执行了，但是出现了“Deployer not found: github”。
    Error代码:Deployer not found: git
    更改_config.yml主配置文件为utf-8编码时导致的异常。
    执行npm install hexo-deployer-git --save然后重新deploy即可。

    各版本所做更新修正，请参考这里。

    如何迁移至Hexo

    http://hexo.io/zh-cn/docs/migration.html

    Hexo命令

    hexo init <folder> #初始化一个网站目录 我是直接cd到目标目录执行hexo init的 hexo new "postName" #新建文章，或者source/_posts手动编辑 hexo new page "pageName" #新建页面 默认链接为:主页地址/pageName/ hexo clean #清除缓存文件db.json和已生成的静态文件public hexo generate #生成public静态文件至public目录 hexo server #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server) hexo deploy #将.deploy目录部署到GitHub hexo --debug #在终端中显示调试信息并记录到 `debug.log` hexo help #查看帮助 hexo version #查看Hexo的版本

    Hexo简写命令

    hexo n "postName" #新建文章，或者source/_posts手动编辑 hexo g #生成public静态文件至public目录 hexo s #本地发布预览效果 http://localhost:4000 ('ctrl + c'关闭server) hexo d #将.deploy目录部署到GitHub

    Hexo复合命令

    hexo d -g #生成并部署上传 hexo s -g #生成并本地发布预览 hexo clean && hexo d -g #清空缓存然后生成并部署上传 hexo clean && hexo s -g #清空缓存然后生成并本地发布预览

    本文部分说明来自互联网
    特别感谢 @wsgzao @阮一峰 @TimFei @Litten @陈素封 @zippera @不如



沪ICP备19023445号-2号
友情链接