Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程(三)


-此教程不仅面向计算机专业的同学,任何想搭建个人独立博客的同学,都可以来看看-
--By Y.R.H


前言

接上文,经过Windows下一步步搭建自己的独立博客——使用 GitHub Pages + Hexo 基础教程(二)的学习,相信大家都已经将自己的个人域名和 GitHub Pages 搭建好的个人博客绑定起来了,但是,我们还是没有发表一篇博文,连个人博客的设置都还是默认值,这可不是我们想要的,所以,教程(三)将向大家介绍一下 Hexo 中的 _config.yml 配置文件,以及如何发表博文。


配置文件 _config.yml

个人博客配置一共用到两个文件,一个是对整站的配置 Hexo(hexo 根目录下)\ _config.yml,另一个是对主题的配置 Hexo\themes\xxx(主题名)\ _config.yml,我们来分别介绍。

整站配置文件 Hexo \ _config.yml

该配置文件位于我们使用 hexo init 命令时的目录下,如图:

用文本编辑器打开后如图(作者使用的是 Sublime Text 3):

接下来就来详细的说一下这些都是做什么用的(可能与大家的有些许出入,不存在的项就为默认值):

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

# Site 基本配置
title: Coooooooooder_Y # 个人博客标题(反映在网站左上角)
subtitle: 杨睿涵 个人博客 # 个人博客副标题
description: This is a Personal Blog for Y.R.H # 个人博客的描述
author: Yang R.H. # 个人博客作者
language: zh-CN # 个人博客使用语言(默认为 English ,简体用 zh-CN ,繁体用 zh-TW)
email: coderyrh9236@gmail.com # 个人博客作者的联系邮箱

# # URL #这项可以不配置,绑定域名后,欲创建sitemap.xml需要配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.yangruihan.com  # 绑定的域名
root: / # 是否为根目录显示该博客,如过,你想使用 www.xxx.com/blog 来显示博客 这项需要改成 /blog
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
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives 默认值为2,这里都修改为1,相应界面就只会列出标题,而非全文
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archives: 1
category: 1
tag: 1

# 日期格式无需修改
# 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: 15
pagination_dir: page

# Disqus # 社会化评论 默认为disqus,我这里换成了“多说”
# disqus_shortname: yangruihan
# 多说社会化评论
duoshuo_shortname: yangruihan

# Extensions # 个人博客使用的主题,可以自行更换
## Plugins: http://hexo.io/plugins/
## Themes: http://hexo.io/themes/
theme: jacman


# Deployment # 个人博客部署到 GitHub
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/yangruihan/yangruihan.github.io.git
  branch: master
  message: 

# Extensions # 使用的插件
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

# 插件配置

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

大家可以根据自己的需要进行相应的更改。

提示:如果还有什么不太明白,可以看 Hexo 官网 的说明

主题配置文件 Hexo\themes\xxx\_config.yml

小提示:由于主题的不同,配置文件也或多或少有些区别,不过英文好的同学肯定能看懂每项的意思,大家可以试着改一改,然后在本地跑起来,可以直接看到效果。

该配置文件位于我们的 Hexo\themes\xxx\ 的目录下,如图:


用文本编辑器打开后如图:


这里只介绍通用的一些选项:

##### Menu # 个人博客右上角显示的导航栏,默认为英文(Home: /)可以手动改成中文
menu:
  首页: /
  文章列表: /archives
  关于: /about
## you can create `tags` and `categories` folders in `../source`.
## And create a `index.md` file in each of them.
## set `front-matter`as
## layout: tags (or categories)
## title: tags (or categories)
## ---

#### Widgets # 个人博客右边栏
widgets: 
- category
- tag
- links
- douban
- rss
## provide seven widgets:category,tag,rss,archive,tagcloud,links,weibo,douban


#### RSS 
rss: /atom.xml # rss 源添加

#### Image # 网站用到的图片资源索引
imglogo:
  enable: false             ## display image logo true/false.
  src: img/logo.png        ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.     
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: img/banner.jpg ## size:1920px*200px+. Banner Picture
### Theme Color 
theme_color:
    theme: '#4682b4'    ##the defaut theme color is blue

#### index post is expanding or not 
index: # 文章索引
  expand: false  # 文章在首页是否展开   ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: 阅读全文 #   

close_aside: false  #close sidebar in post page if true

#### Author information
author: # 作者的信息
  intro_line1:  "Hello ,I'm Yangruihan."  # 介绍作者的话  ## your introduction on the bottom of the page
  intro_line2:  "This is my blog, keep studying everyday." # 同上  ## the 2nd line
  weibo:  3767425381  #微博号  ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895
  weibo_verifier: # 微博show ## e.g. b3593ceb Your weibo-show widget verifier ,if you use weibo-show it is needed.
  tsina:  3767425381  # 微博分享 ## e.g. 2176287895  Your weibo ID,It will be used in share button.
  douban: # 豆瓣     ## e.g. wuchong1014 or your id for https://www.douban.com/people/wuchong1014
  zhihu: yang-rui-han-68 # 知乎     ## e.g. jark  for http://www.zhihu.com/people/jark
  email: coderyrh9236@gmail.com # 邮箱    ## e.g. imjark@gmail.com
  twitter:  # twitter  ## e.g. jarkwu for https://twitter.com/jarkwu
  github: yangruihan  # github 主页 ## e.g. wuchong for https://github.com/wuchong
  facebook:   ## e.g. imjark for https://facebook.com/imjark
  linkedin:   ## e.g. wuchong1014 for https://www.linkedin.com/in/wuchong1014
  google_plus:    ## e.g. "111190881341800841449" for https://plus.google.com/u/0/111190881341800841449, the "" is needed!
  stackoverflow:  ## e.g. 3222790 for http://stackoverflow.com/users/3222790/jark
## if you set them, the corresponding  share button will show on the footer
#### Links 个人博客底边栏的链接
links:
  我的GitHub: https://github.com/yangruihan,杨睿涵的个人GitHub
  我的微博: http://weibo.com/3767425381,杨睿涵的个人新浪微博
  我的知乎: http://www.zhihu.com/people/yang-rui-han-68,杨睿涵的个人知乎

配置文件就介绍到这里。


发表博文

废了这么半天功夫搭建了一个个人博客,最重要的当然是写博客啦。

新建博文

新建博文有两种方法

方法一:使用命令新建一篇博文

使用 Git Shell 进入 Hexo 文件夹,输入一下命令:

$ hexo new "文章题目"

当出现如下图提示时,表示新博文已经创建完毕:

这时会发现在 Hexo\source\_posts 目录中多了一个文件,如图:

用文本编辑器打开后,如下图:

这里系统不会创建博文分类,如果想加上文章的类型,可以在 “___” 上面自己加上一个标签:

categories: xxx  # 文章文类

到此一篇新博文就创建成功了。

方法二:直接在文件夹中创建

直接进入目录 Hexo\source\_posts 目录中,右键新建一个文本文档,将名字改为 博文名.md ,用文本编辑器打开自行加上所需标签即可:

title: "测试博文"
date: 2015-03-23 19:33:59
tags:
---

写博文

博文内容写在 "___" 后面,如图:

因为 Hexo 是支持 markdown 语法的,所以我们也要使用 markdown 来书写博文,千万不要觉得 markdown 像是 C、C++、Java 这样的编程语言,又难学,又难理解,markdown 的语法很简单,但是功能十分强大,排版什么的分分钟搞定,一旦你学会使用,只剩下一句话,根本停不下来!

由于篇幅原因这里就不详细介绍 markdown 语法了,请移步以下网站,也可以自行搜索一下 markdown 语法:
献给写作者的 Markdown 新手指南
markdown专题

发博文

博文写完后,还是在 Git Shell 中进入 Hexo 文件夹中使用那几条命令,将网页自动生成并部署到 GitHub上:

$ hexo clean
$ hexo generate
(若要本地预览就先执行 hexo server)
$ hexo deploy

刷新个人博客网页,就可以看到新鲜出炉的博文了,赶紧邀请小伙伴们来欣赏吧。


补充

快捷命令方式

hexo g == hexo generate
hexo d == hexo deploy
hexo s == hexo server
hexo n == hexo new
# 还能组合使用,如:
hexo d -g

如何在博文中插图

首先,注册一个图床账号
本人使用的是七牛云存储(如果有什么更好的推荐,请留言),体验用户免费1G空间,认证免费用户10G空间,已经足够日常使用了,并且很稳定。
将自己需要插入博文的图片上传到云空间,如图:

在博文中输入 ![](填写刚才复制的地址) ,就把图片成功插入了

推荐使用 简书 markdown 预览编辑模式,可以实时看到自己写到效果

如图:

使用步骤:

P.S:如果发现文章中有明显的错误和问题请在下面留言或者联系本人,本人将及时改正,避免给大家带来不必要的误导,谢谢~

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

推荐阅读更多精彩内容