Hexo + Github-Pages 从零开始搭建个人博客

经过各种找资料,踩过各种坑,终于搭建好了个人博客,安装hexo是3.2.2版本,hexo不同的版本,配置稍微有些不一样。由于本人使用的是Mac,下面的都是针对Mac的,Windows下的配置类似。博客原文


Hexo

hexo是一个基于Node.js的简单,快速,强大的静态博客框架,可以方便的生成静态网页托管在github上,作者是来自台湾的 Tommy Chen。特点:

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

配置环境

1.安装Node.js ,用来生成静态页面的。到Node.js官网下载相应平台的最新版本,一路安装即可。npm是随同Node.js一起安装的包管理工具,能解决Node.js代码部署上的很多问题

2.安装Git,把本地的hexo内容提交到github上去,需要和Hexo建立连接,下面会有说到

3.申请GitHub,是用来做博客的远程创库、域名、服务器之类的,github账号没有的话直接申请就行了,跟一般的注册账号差不多,SSH Keys,看你自己了,可以不配制,不配置的话以后每次对自己的博客有改动提交的时候就要手动输入账号密码,配置了就不需要了,怎么配置我就不多说了,网上有很多教程

安装Hexo

Node和Git都安装好后,即可开始安装Hexo 具体可以查看Hexo中文文档

$ npm install -g hexo

这里可能安装失败,可能权限不够,在命令前加 sudo
安装成功以后,就可以创建blog。首先创建一个文件夹,如MyBlog,这是你的博客根目录,用于存放hexo的配置文件,然后进入MyBlog里初始化Hexo。

$ hexo init

需要等待一段时间,成功后会显示:INFO Start blogging with Hexo! 这时的MyBlog 目录下有以下这些文件

.
├── _config.yml
├── node_modules
├── package.json
├── source
├── scripts
├── scaffolds
|   ├── drafts
|   ├── posts
|   └── page
└── themes
  • _config.yml:全局配置文件,大多数的设置都在这里 配置项都需要空一格
  • node_modules: node的一些模块组件
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑 drafts:草稿文章 posts:发布文章
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
  • source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录
  • themes:主题文件目录

_config.yml 用到的比较多

 # Hexo Configuration
  ## Docs: https://hexo.io/docs/configuration.html
  ## Source: https://github.com/hexojs/hexo/

  # Site 站点信息:定义标题,作者,语言
  title: 这里是你博客的标题
  subtitle: 子标题
  description: 个人介绍
  author: 笔名
  language: zh_CN 
  timezone: Asia/Shanghai

  # URL Url访问路径
  ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
  url: http://yoursite.com
  root: /
  permalink: :year/:month/:day/:title/
  permalink_defaults:

  # Directory 文件目录:正文的存储目录
  source_dir: source
  public_dir: public
  tag_dir: tags
  archive_dir: archives
  category_dir: categories
  code_dir: downloads/code
  i18n_dir: :lang
  skip_render:

  # Writing 写博客配置:文章标题,文章类型,外部链接
  new_post_name: :title.md # File name of new posts
  default_layout: post
  titlecase: false # Transform title into titlecase
  external_link: true # Open external links in new tab
  filename_case: 0
  render_drafts: false
  post_asset_folder: false
  relative_link: false
  future: true
  highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

  # Category & Tag   目录和标签:默认分类,分类图,标签图
  default_category: uncategorized
  category_map:
  tag_map:

  # Date / Time format 时间和日期格式:
  ## Hexo uses Moment.js to parse and display date
  ## You can customize the date format as defined in
  ## http://momentjs.com/docs/#/displaying/format/
  date_format: YYYY-MM-DD
  time_format: HH:mm:ss

  # Pagination   分页设置:每页显示数量
  ## Set per_page to 0 to disable pagination
  per_page: 10
  pagination_dir: page

  # Extensions   插件和皮肤:换皮肤,安装插件
  ## Plugins: https://hexo.io/plugins/
  ## Themes: https://hexo.io/themes/
  theme: landscape 默认主题

  # Deployment   部署配置:github发布,type类型为git
  ## Docs: https://hexo.io/docs/deployment.html
  deploy:
  type:

接下来就是配置_config.yml,以及一些 Hexo 指令操作

Hexo常用命令

  hexo new postName       #新建文章 在source/_posts 下生成
  hexo new page pageName  #新建页面 在source/pageName 下生成
  hexo deploy             #将.deploy目录部署到GitHub 简写指令:hexo d 
  hexo generate           #生成静态页面至public目录 简写指令:hexo g 
  hexo server             #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)简写指令hexo s 
  hexo clean              #清除所有静态页面和缓存数据  

默认在source/_posts 存在了hello-world.md 可以直接输入 hexo generate 生成静态网页
这时目录下多了 public 这是生成静态网页内容目录。可以输入 hexo clean 清除

生成静态网页后,就能启动本地服务,可以进行文章预览调试,输入 hexo server 默认是4000端口,在服务器启动期间,Hexo 会监视文件变动并自动更新,您无须重启服务器。如果是第二次会提示,Port 4000 has been used. Try other port instead 这时可以输入指定的端口 hexo server -p xxxx 如 7681 输出:

INFO  Start processing
INFO  Hexo is running at http://localhost:7681/. Press Ctrl+C to stop.

浏览器输入http://localhost:7681 就可以预览页面

屏幕快照 2016-12-28 下午1.53.15.png

这是正常的情况,可能中间会有一些错误提示

Hexo Server 错误

Hexo 3.0 把服务器独立成了个别模块,您必须先安装 hexo-server才能使用,需要执行命令:

 $ npm install hexo-server --save

页面显示白板和Cannot GET

原因:

由于2.6以后就更新了,我们需要手动配置些东西,我们需要输入下面三行命令,看情况添加 sudo

$ npm install hexo-renderer-ejs --save

$ npm install hexo-renderer-stylus --save

$ npm install hexo-renderer-marked --save

部署到github

在github建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io】。然后建立关联

安装 hexo-deployer-git

npm install hexo-deployer-git --save

_config.yml 配置文件中修改参数,在文件最下面,一个正确的部署配置中至少要有 type 参数,例如:

  type: git
  repo: <repository url> 库(Repository)地址
  branch: [branch] 分支名称。如果您使用的是 GitHub 或 GitCafe 的话,程序会尝试自动检测。
  message: [message] 自定义提交信息 (默认为 Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})  
  

Hexo 提供了快速方便的一键部署功能,让您只需一条命令就能将网站部署到服务器上。

hexo deploy

执行这条命令后会生成一个隐藏文件夹.deploy_git ,可以输入ls -a 打开查看,hexo会将生成的public文件夹复制到.deploy_git文件夹中

文章

sources/_posts 目录下打开默认的Hello-Word.md,文章一般头部格式:

title: xxxx                    #文章的标题,这个才是显示的文章标题,其实文件名不影响
date: 2015-09-01 20:33:26      #用命令会自动生成,也可以自己写,所以文章时间可以改
categories: xxx                #自定义文章的分类
tags: xxx                      #tag,为文章添加标签,方便搜索
 ---
    

注意点

  • 如果在博客文章列表中,不想全文显示,可以增加 ``, 后面的内容就不会显示在列表。
  • Markdown标题标准写法写法需要在"#"和后面字符之间加一个空格,如果不加空格 有些引擎就解析不了

Markdown

  • Windows下可以使用 MarkdownPad2
  • Mac 建议使用 Mou 这款免费且十分好用的 Markdown 编辑器
  • Web 端上,推荐简书这款产品

插件

可以在package.json中查看已经安装的插件

添加RSS

 $ npm install hexo-generator-feed --save
  

然后,到博客目录 /public 下,会有atom.xml生成 再到_config.yml 里配置一下

   feed:
        type: atom      #type 表示类型, 是 atom 还是 rss2.
        path: atom.xml  #path 表示 Feed 路径
        limit: 20       #limit 最多多少篇最近文章
         

添加Sitemap

Sitemap 的提交主要的目的,是要避免搜索引擎的爬虫没有完整的收录整个网页的内容,所以提交 Sitemap 是能够补足搜索引擎的不足,进而加速网页的收录速度,达到搜寻引擎友好的目的。

hexo-generator-sitemap

 $ npm install hexo-generator-sitemap --save
    

同样在_config.yml 里配置一下

 sitemap:
     path: sitemap.xml
     #path 表示 Sitemap 的路径. 默认为 sitemap.xml.
     

对于国内用户还需要安装插件 hexo-generator-baidu-sitemap, 顾名思义是为百度量身打造的. 安装

 $ npm install hexo-generator-baidu-sitemap --save

然后在_config.yml里配置一下

  baidusitemap:
      path: baidusitemap.xml
            

添加搜索

 $ npm install hexo-generator-search
  

其他插件

Plugins·hexojs/hexo

主题

默认的是landscape,这里有大量的主题列表

安装喜欢的主题

$ git clone <repository> themes/themeName

需要在_config.yml 中更改theme: themeName 更改主题后需要重新 hexo g 生成页面
在主题的_config.yml文件里面可以修改头像,友情链接等等,配置需要展示的页面元素,一般里面都会有介绍

评论

在Hexo中,默认使用的评论是国外的Disqus,不过因为国内的”网络环境”问题,我们改为国内的多说评论系统。
需要设置 short_name:字段,这个字段为你多说填写的站点名字,比如我的域名:chenao0727github.duoshuo.com,那么我的short_name: chenao0727github

404页面

GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容