Hexo+GitHub创建个人博客

hoxo出自台湾大学生tommy351之手,是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。

环境搭建

安装Git

Git下载

安装Node

两种方式安装Node.js :

  1. 使用Git Bash的方式
    $curl https://raw.github.com/creationix/nvm/master/install.sh | sh
    $ nvm install stable (安装完成后需要执行该命令来重启终端)
  2. 通过下载安装程序
    注意安装时,勾选Add to PATH选项

安装Hexo

Node和Git都安装好后,可执行如下命令安装hexo:
npm install -g hexo

GitHub

  • 注册GitHub帐号
  • 建立一个与用户名对应的仓库,格式必须是[usename.github.io]
  • 添加ssh公钥 [Setting -> SSH and GPG keys -> New SSH key]
  • 验证添加成功
    ssh -T git@github.com

获取公钥详解

  1. 打开git bash
  2. 执行生成公钥和私钥的命令:ssh-keygen -t rsa 并按回车3下(为什么按三下,是因为有提示你是否需要设置密码,如果设置了每次使用Git都会用到密码,一般都是直接不写为空,直接回车就好了)。会在一个文件夹里面生成一个私钥 id_rsa和一个公钥id_rsa.pub。
  3. 执行查看公钥的命令:cat ~/.ssh/id_rsa.pub

查看博客

  1. 初始化
    hexo init <folder>
    或者cd到目标目录,执行hexo init
  2. 生成静态页面
    hexo g
  3. 本地启动
    hexo s
    http://localhost:4000可查看效果

目录

hexo目录结构

.
├── .deploy
├── public
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
  • .deploy:执行hexo deploy命令部署到GitHub上的内容目录
  • public:执行hexo generate命令,输出的静态网页内容目录
  • scaffolds:layout模板文件目录,其中的md文件可以添加编辑
  • scripts:扩展脚本目录,这里可以自定义一些javascript脚本
    -source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、fav
    icon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。
  • _drafts:草稿文章
  • _posts:发布文章
  • themes:主题文件目录
  • _config.yml:全局配置文件,大多数的设置都在这里
  • package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

_config.yml简介:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Snail琳子 #网站标题
subtitle: stay hungry,stay foolish #网站副标题
description: #描述
author: JZM #作者
email: zm.jin@qq.com #联系邮箱
language: zh-Hans #语言
timezone: #时区

# URL #域名和文件结构
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://jzm1994.github.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  #分类文件夹

# Writing #写文章选项
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight: #代码高亮
  enable: true #是否启用
  line_number: true #是否显示行号
  auto_detect: true
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Server #本地服务参数
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
logger: true
logger_format:

# 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 #每页10篇文章
pagination_dir: page

# Extensions #插件,暂时未安装插件
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment #部署
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:
      github: git@github.com:jzm1994/jzm1994.github.io.git
      coding: git@git.coding.net:jzm1994/jzm1994.git
  branch: master 

hexo\themes\简介:

.
├── languages          #多语言
|   ├── default.yml    #默认语言
|   └── zh-CN.yml      #中文语言
├── layout             #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
|   ├── _partial       #局部的布局,此目录下的*.ejs是对头尾等局部的控制
|   └── _widget        #小挂件的布局,页面下方小挂件的控制
├── source             #源码
|   ├── css            #css源码 
|   |   ├── _base      #*.styl基础css
|   |   ├── _partial   #*.styl局部css
|   |   ├── fonts      #字体
|   |   ├── images     #图片
|   |   └── style.styl #*.styl引入需要的css源码
|   ├── fancybox       #fancybox效果源码
|   └── js             #javascript源代码
├── _config.yml        #主题配置文件
└── README.md          #用GitHub的都知道

命令

hexo n [layout] "博客标题" = hexo new [layout] "博客标题" #新建文章 layout指布局 默认是post
hexo p = hexo public
hexo g = hexo generate #生成静态网页至public目录
hexo s = hexo service #启动服务本地预览
hexo d = hexo deploy #部署到Github/Coding
hexo clean #网页不能正常显示清除缓存
hexo g -d #复合命令
hexo new page "pageName" #新建页面

细节配置

主题

NextT主题
git clone https://github.com/iissnan/hexo-theme-next themes/next
启用NextT主题,打开hexo_config.yml,修改 theme 字段
theme: next
打开hexo\themes\next,编辑主题配置文件_config.yml

图标

在hexo\themes\modernist\layout_partial\head.ejs下,找到这句:
<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">
将favicon.ico放到工程hexo\source下。可以在Faviconer制作ico图标,国内有比特虫

摘要

以上是文章摘要 以下是余下全文

统计

为hexo博客添加访问次数统计功能

评论

多说第三方评论系统

  1. 在主题_config.yml中配置duoshuo_shortname:二级域名中的shortname
  2. 复制代码粘贴到 hexo\themes\next\layout_partial\comment.ejs里面:
<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
    #多说通用代码
</section>
<% } %>

分享

分享服务商:多说,加网,bShare,百度分享
加网添加方式:

  1. 在hexo\themes\modernist\layout_partial\post下新建jiathis.ejs文件
  2. 注册加网获得你的分享代码,写入jiathis.ejs
  3. 在hexo\themes\modernist\layout_partial\article.ejs中,添加<%-partial(‘post/jiathis’)%>。

404

GitHub Pages自定义404页面直接在根目录下创建404.html。404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名和使用hexo s在本机调试都不起作用。
腾讯公益404

图床

七牛云存储图片提供图片外链。

插件

  1. RSS
    npm install hexo-generator-feed --save
    开启RSS
    rss: /atom.xml

更新

更新hexo:
npm update -g hexo
更新主题:

cd themes/next
git pull

更新插件:
npm update

申请域名

搭建过程出现问题

Hexo博客,解析不了标题(#)

markdown标题标准写法需要在"#"和后面字符之间加一个空格
## hello world

localhost: 4000测试不成功

hexo s:启动本地服务 Ctrl+c指的是关闭服务

hexo g: 执行报错

命令需要在init后的文件夹内执行

参考文献

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

推荐阅读更多精彩内容