本文章主要介绍使用hexo框架搭建博客,使用GitHub免费托管自己的博客代码,并使用GitHub Pages提供的免费服务。换句话说,就是使用免费资源搭建属于自己的博客网站。
前言
在很久以前,博主就想着要有自主的博客专栏或者网站。经历了博客园这个需要所谓的编辑审核,一直比较困惑,这些编辑是什么出身,怎么知道技术博客的价值性。
接下来找到了开源中国,这个可以自由发言的地方。不过,不知道是不是受众面不广,访问量都不是很理想。
再然后就来自己动手开始搭建博客。从手写html发布文章,到使用jekyll,最后到了hexo阵营。
终于,有种找到家的赶脚。hexo不仅搭建方便,而且在后续的功能扩展以及文章发布都是非常方便的。不仅如此,还可以本地调试,预览效果。最方便的是支持markdown编写文档。
本文就是介绍如何安装使用hexo搭建属于自己的博客。从此不再担心投稿被莫名拒绝。可以在自己的一亩三分地讲述着自己的故事。
环境准备
安装Git
MAC OS X 是自带Git命令行工具。
Windows 可以安装Git Bash。
安装Node.js
前往官网地址,根据教程安装即可。
安装hexo
1
| $ sudo npm install hexo-cli -g
|
使用hexo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| # 创建hexo文件夹 $ mkdir hexo
# 进入hexo文件夹 $ cd hexo
# 初始化hexo $ hexo init
# 安装依赖包 $ npm install
# 本地查看 # 先运行下面的命令,再在浏览器输入localhost:4000即可 $ hexo server
# 问题:执行hexo server提示找不到该指令 # 解决办法:在Hexo 3.0 后server被单独出来了,需要安装server,安装的命令如下: $ npm install hexo -server --save
|
生成静态网站
目录结构
1 2 3 4 5 6 7 8 9 10 11
| . ├── .deploy #需要部署的文件 ├── node_modules #Hexo插件 ├── public #生成的静态网页文件 ├── scaffolds #模板 ├── source #博客正文和其他源文件,404、favicon、CNAME 都应该放在这里 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主题 ├── _config.yml #全局配置文件 └── package.json
|
全局配置 _config.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
| # Hexo Configuration ## Docs: http://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site #站点信息 title: #标题 subtitle: #副标题 description: #站点描述,给搜索引擎看的 author: #作者 email: #电子邮箱 language: zh-CN #语言 # URL #链接格式 url: #网址 root: / #根目录 permalink: :year/:month/:day/:title/ #文章的链接格式 tag_dir: tags #标签目录 archive_dir: archives #存档目录 category_dir: categories #分类目录 code_dir: downloads/code permalink_defaults: # Directory #目录 source_dir: source #源文件目录 public_dir: public #生成的网页文件目录 # Writing #写作 new_post_name: :title.md #新文章标题 default_layout: post #默认的模板,包括 post、page、photo、draft(文章、页面、照片、草稿) titlecase: false #标题转换成大写 external_link: true #在新选项卡中打开连接 filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false highlight: #语法高亮 enable: true #是否启用 line_number: true #显示行号 tab_replace: # Category & Tag #分类和标签 default_category: uncategorized #默认分类 category_map: tag_map: # Archives 2: 开启分页 1: 禁用分页 0: 全部禁用 archive: 2 category: 2 tag: 2 # Server #本地服务器 port: 4000 #端口号 server_ip: localhost #IP 地址 logger: false logger_format: dev # Date / Time format #日期时间格式 date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/ time_format: H:mm:ss # Pagination #分页 per_page: 10 #每页文章数,设置成 0 禁用分页 pagination_dir: page # Disqus #Disqus评论,替换为多说 disqus_shortname: # Extensions #拓展插件 theme: landscape-plus #主题 exclude_generator: plugins: #插件,例如生成 RSS 和站点地图的 - hexo-generator-feed - hexo-generator-sitemap # Deployment #部署,将 lmintlcx 改成用户名 deploy: type: git repo: github创库地址.git branch: master
|
注意
- 配置文件的冒号“:”后面有一个空格
- repo: github创库地址.git
hexo命令行使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| 常用命令: hexo help #查看帮助 hexo init #初始化一个目录 hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成网页,可以在 public 目录查看整个网站的文件 hexo server #本地预览,'Ctrl+C'关闭 hexo deploy #部署.deploy目录 hexo clean #清除缓存,强烈建议每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹
简写: hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
|
使用GitHub
注册账号
前往GitHub官网注册账号,按照网站提示注册。
创建代码仓库
这个仓库的名字需要和你的账号对应。格式: yourname.github.io
具体使用GitHub可以参考:《GitHub 使用》
编辑文章
在 _posts 目录下会生成文件标题.md
1 2 3 4 5 6 7
| --- title: Hello World date: 2015-07-30 07:56:29 #发表日期,一般不改动 categories: hexo #文章文类 tags: [hexo,github] #文章标签,多于一项时用这种格式 --- 正文,使用Markdown语法书写
|
编辑完后保存, 预览
hexo部署
执行下列指令完成部署
1 2
| hexo generate hexo deploy
|
以下提示说明部署成功
hexo插件使用
安装hexo-generator-feed插件
1
| $ npm install hexo-generator-feed --save
|
安装完后,会在node_modules目录下生成hexo-generator-feed目录。然后将其配置到根目录的_config.yml
1 2 3 4 5 6 7 8 9 10
| # Extensions ## Plugins: http://hexo.io/plugins/ #RSS订阅 plugin: - hexo-generator-feed #Feed Atom feed: #可选项,可以不填 type: atom path: atom.xml limit: 20
|
最后,在你当前主题下的_config.yml下,添加RSS订阅链接即可,这里博主用的是Yilia主题,subnav下添加rss:
1 2 3
| # SubNav subnav: rss: "/atom.xml"
|
至此,博客搭建完成,基本使用介绍完毕。希望对大家有所帮助。