-此教程不仅面向计算机专业的同学,任何想搭建个人独立博客的同学,都可以来看看-
--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:如果发现文章中有明显的错误和问题请在下面留言或者联系本人,本人将及时改正,避免给大家带来不必要的误导,谢谢~
网友评论