友人C

利用github pages快速搭建hexo博客
githubpage除了在国内有些地区访问速度不好,还是有很多优点的,比如无限流量,无限空间。静态博客框架有很多,...
扫描右侧二维码阅读全文
25
2016/11

利用github pages快速搭建hexo博客

githubpage除了在国内有些地区访问速度不好,还是有很多优点的,比如无限流量,无限空间。

静态博客框架有很多,hexo个人认为更简单容易上手,因为有官方中文文档。

hexo原理就是通过本地一个程序扫描source目录内容,建立索引,根据你 theme 文件夹的主题生成页面到 public 文件夹。然后通过git方式把pubilc文件夹内容传到github。github pages能够解析并且展示出来。

演示地址:http://ihewro.top


安装nodejs 和 git 和cmder

  • nodejs:进入官网点击首页绿色的左边的按钮就会自动下载,一键傻瓜式安装。配套会自动安装npm
  • git:点击downlode 下载自动安装。安装完成,会有一个git文件夹。git bash就是最重要的一个命令窗口
  • cmder:如果你不喜欢git的命令行窗口,windows环境下推荐使用cmder命令行工具,美观,强大,完整版支持git命和Linux命令,完全可以替代git + windows自带的cmd。(本文步骤在cmdeer上操作)

git 连接远程仓库

因为本地仓库要同步,所以必须本地连接github仓库。方法见 30分钟git 快速入门-操作远程仓库

创建github仓库

官方说明

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

翻译过来就是:

仓库一定要取名为username.github.io 比如我就是ihewro.github.io。否则不会正常工作!

克隆仓库到本地文件夹

比如我:
本地新建了一个文件夹,取名为blog。打开cmder(命令行工具)

git clone <仓库的ssh地址>

例如:
λ git clone git@github.com:ihewro/ihewro.github.io.git
Cloning into 'ihewro.github.io'...
warning: You appear to have cloned an empty repository.

这样提示,证明已经成功clone了!

全局安装hexo

$ cnpm install -g hexo-cli

输入 hexo -v 查看是否成功

λ hexo -v
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 6.9.1
v8: 5.1.281.84
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2j

OK!

在当前文件夹部署hexo

上一条命令只是把hexo安装在系统的一个公用文件夹里,你可以在系统任何位置创建hexo。在当前文件夹(比如我:ihewro.github.io文件夹)部署hexo命令:

<!--把hexo部署到当前文件夹-->
hexo init

<!--根据hexo的`package.json`配置文件安装必要的模块-->
cnpm install

到这步结束,hexo本地就安装完成了!

本地预览网站

步骤是:(清除一开始的静态文件)——生成静态文件——启动本地服务

  • 仅仅两步骤,不需要push等其他指令,非常方便
  • (清除一开始的静态文件)一般不需要操作,仅仅在出现错误时候,可以尝试先清除旧的静态文件
  1. 清除一开始的静态文件(第一次当然不需要啦!)
hexo clean
  1. 生成静态文件
hexo generate
hexo g

上面两个均可,任选一个即可!

选项:(是跟在指令后面的)

选项描述
-d, --deploy文件生成后立即部署网站
-w, --watch监视文件变动

3.启动本地服务

hexo server
hexo s

上面两个均可,任选一个即可!

选项描述
-p, --port重设端口
-s, --static只使用静态文件
-l, --log启动日记记录,使用覆盖记录格式

部署网站到github pages

步骤是:本地配置部署信息——(清除一开始的静态文件)——生成静态文件——部署网站

  1. 本地配置部署信息

打开_config.yml文件,在deploy部分填写配置信息,把repository值设置为刚刚复制好的ssh地址。

deploy:
  type: git
  repo: <your-github-repo-ssh-address>
  branch: master

冒号后面必须有一个空格

  1. 清除一开始的静态文件(第一次当然不需要啦!)
  2. 生成静态文件
  3. 部署网站
hexo deploy
hexo d

选项:

参数描述
-g,--generate部署之前预先生成静态文件

如果上面这个步骤报错:ERROR Deployer not found : github,尝试安装hexo-deployer-git:

cnpm install hexo-deployer-git --save

文章相关

新建文章

$ hexo new [layout] <title>
$ hexo n [layout] <title>
  • [layout]是指你的文章布局。默认有三种post(文章页面)、page(独立页面)、draft(草稿页面),在scaffolds文件夹里存储了就是这些模板和布局
  • 执行命令后,会在对应的文件夹中生成.md文件。
  • 在.md 文件的分界线下面使用markdown语法书写文章即可!

有这样几个问题解决方法:

  1. 添加分类 :默认布局里面没有category,打开scaffolds/post.md文件,在tages:上面加入categories:,保存后,重新执行hexo new [layout] <name>命令,会发现新建的页面里有categories:项了。
  2. 添加标签 :有两种方法:

    1. tages: [标签1,标签2,...标签n]
 tages: 
- 标签1
- 标签2
...
- 标签n

文章上方的front-matter除了上面常用的参数,还有更多 见官方文档

修改分类路径

比如,我这样写:

categories: 技巧

那么访问技巧分类的路径就是 ./categories/技巧 如果要改分类路径,比如让分类路径为英文.

打开根目录下的配置文件_config.yml,找到如下位置做更改:

# Category & Tag
default_category: uncategorized
category_map:
    技巧: trick
    生活: life
    其他: other
tag_map:

在这里category_map:是设置分类的地方,每行一个分类,冒号前面是分类名称,后面是访问路径。

这样打开技巧分类时候的路径就变成了./categories/trick

更换主题

更改_config.yml文件里面的theme字段,对应了theme文件夹里面的主题文件夹名称。

然后

hexo clean

并删除.deploy_git文件夹。
执行命令

hexo g -d 

hexo博客一些文件夹及文件介绍

  • node_modules:npm下载一个一些包和模块都在这个文件夹里面
  • public:已生成的静态文件 (public)。
  • scaffolds: 中文意思支架,存储了文章的模板文件。即当你新建一片文章自动填充的模板内容。
  • _config.yml:博客站点的配置文件

绑定自定义域名

  • 在github仓库中新建一个文件,名称为CNAME,没有后缀。内容填你的域名地址,不加http://。如:ihewro.top
  • 在域名解析里,添加CNAME解析,解析地址为你的githubpage地址,如我的:ihewro.github.io 不用加http://

参考文章

如何使用Hexo搭建Github Pages博客
hexo官方文档
Hexo常见问题解决方案
Hexo使用攻略:(四)Hexo的分类和标签设置

最后修改:2017 年 02 月 15 日 06 : 28 PM
如果觉得我的文章对你有用,请随意赞赏

29 条评论

  1. Oasis Lee

    远古巨坟!

  2. 龙显文

    $ cnpm install -g hexo-cli //
    这是使用了阿里npm全量镜像后的安装命令吧,附录npm镜像地址就更好了。

    1. 友人C
      @龙显文

      忘了说了( ´∵`)

  3. 毛志武

    为什么我的搭建好之后评论显示的头像都一样呢 都是一个蓝色的图片

    1. 友人C
      @毛志武

      评论头像调用的是gravatar头像,如果没有设置的话,就是蓝色滴了
      详情点这个:http://itlu.org/zhidao/gravatar-register.html

  4. Lvv

    :arrow: 我这边电信打开慢慢的,建议托管在Ucloud

    1. 友人C
      @Lvv

      以后如果使用这个站的话试试 :razz:

  5. LiarOnce

    说真的不加cdn速度真的很慢

    1. 友人C
      @LiarOnce

      恩,我这边速度还可以,反正也不准备正式用

      1. LiarOnce
        @友人C

        那么你的那个top域名是怎么回事,为了测速注册的? :arrow:

        1. 友人C
          @LiarOnce

          当时阿里云搞活动,领的学生券,top首年只要2元,我就随便买了好几个 :razz:

          1. LiarOnce
            @友人C

            一直都是用freenom免费得 :cry:

            1. 友人C
              @LiarOnce

              :???:

  6. LiarOnce

    网站演示呢 :lol:

    1. LiarOnce
      @LiarOnce

      Material主题啊 :???:

      1. 友人C
        @LiarOnce

        对哒!

        1. LiarOnce
          @友人C

          我的下载站倒是用Hexo出来的 :mrgreen:

          1. 友人C
            @LiarOnce

            打不开呀?http://loarch.liaronceme.gq/ 是这个地址吗?

            1. LiarOnce
              @友人C

              是这个,不过之前主机炸了,这个还没恢复过来.

  7. yufan

    你的本地评论ajax是怎么弄得呢- -有个副站是tp想试试 :oops:

    1. 友人C
      @yufan

      是插件哦!AjaxComments Typecho 内置嵌套评论专用 Ajax Comments 1.0.5 willin kan .可以百度一下

      1. yufan
        @友人C

        找到问题了- -textarea的class插件提示正确,但其实错了的

      2. yufan
        @友人C

        你对插件修改了吗,我试了试有点错误

        1. 友人C
          @yufan

          后台你设置正确了吗?是主题作者适应全站ajax修改了一点

          1. yufan
            @友人C

            又来问问题了,你的全站ajax是怎么弄的?有教程吗qwq

            1. 友人C
              @yufan

              你不是可以用pjax吗?pjax比这个好多了

            2. 友人C
              @yufan

              ajax是主题自有的,而且还很有问题 :???:

  8. 1900

    要转战hexo了吗?2333

    1. 友人C
      @1900

      学node 顺便学习这个,hexo真的很方便呀

发表评论