从零开始搭建Hexo-Github博客(基于Next主题)
一、前言
一直以来都想搭个博客,每次都是弄到一半就没有写了。(PS:不知道该怎么操作了!)
不过如果你跟着我的教程来,半个小时肯定能完成这件事!
Hexo,看起来还挺不错的,蛮简约的,感受一下吧
本篇教程分为三个部分:
- 搭建you_site服务器
- 部署到github上
- 优化博客的主题
二、Hexo安装
2.1 Hexo简介
在搭服务器环境之前,先简单介绍一下Hexo。Hexo是一个简单的、轻量的、基于Node.js的一个静态博客框架。通过Hexo我们可以快速创建自己的博客,仅需要几个命令就可以完成。
Hexo特性:
- Hexo基于Node.js,支持多进程,几百篇文章也可以秒生成。
- 支持GitHub Flavored Markdown和所有Octopress的插件。
- Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less。
Hexo的官网,也是基于Github构建的网站
2.2 Hexo环境配置
在安装Hexo之前需要先安装一些它所依赖的环境配置。
这里说的主要是针对 mac (ps:没有windows电脑),mac上安装一些软件的时候,我个人建议先安装一下Homebrew,它相当于一个软件管理工具,不管是安装还是卸载都比较方便。
不多说,安装Homebrew也很简单,利用mac自带的ruby脚本功能,打开终端输入:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装完成之后,接下来安装git和node.js简单多了。
2.3 Git安装
- 安装了Xcode的可以直接跳过这步,因为Xcode自带git
个人建议使用这种方式安装,不要使用网上的安装包进行安装,安装node.js也是。因为有些博客里的安装包有些过时。
打开终端:
$ brew install git
2.4 Node.js安装
$ brew install git
使用 Homebrew 方式安装,node被安装在/usr/local/Cellar/node/
中,自带安装好npm组件。
想测试自己是否安装成功了,可以在桌面新建一个hello.js文件
var http = require('http');
http.createServer(function(req, res){
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(8808, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8808');
然后打开终端,先跳转到桌面,然后在终端输入
node hello.js
然后用浏览器打开终端显示的那个网址,我的显示的是:http://127.0.0.1:8808
,不知道会不会每个人都不一样。如果看到了Hello World字样,就说明安装成功了。
另外node.js还可以手动安装或者利用nvm安装,这里就不介绍了。
2.5 Hexo安装
在终端输入:
sudo install hexo -g
前面的sudo表示用管理员身份运行,所以可能会提示你输入电脑的开机密码
这样,就把Hexo本体和其相依套件安装完毕了,很简单吧。
另外
以后更新Hexo到最新本直接在终端输入:
sudo npm update hexo -g
接下来,就可以初始化一个放置你以后写文章的专属文件夹:
- 现在电脑上某位置创建一个文件夹
- 然后打开终端,跳转到文件夹所在的位置
- 在终端输入
hexo init
初始化之后会稍等一会,然后终端会出现
INFO Start blogging with Hexo!
这样的字样就成功了,去目录查看,可以看见生成了对应的文件以及文件夹,以后我们的操作基本都在这里面了。
终端输入:
pwd
显示当前路径,如果不在我们刚才init的文件夹里,那么就跳转到那个路径。
接下来,我们的终端进入到我们刚刚init的文件夹路径,进入我们的文件夹后,在终端输入:
hexo s
hexo s
是hexo server
的简写
终端结果显示:
Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
复制地址,在浏览器中打开,结果显示:
说明Hexo在你的电脑已经安装成功,里面出现的是默认的一篇文章,当然你也可以自己新建一篇文章,
在终端按住:ctrl+c 停止服务,然后输入:
hexo new "Hello Hexo"
新建的文章,可以在根目录的source/_posts
目录下找到,并且可以使用支持Markdown语法的编辑器来对它进行内容编辑。
再次启动Hexo服务器,通过在终端输入命令:
hexo s
启动服务。
三、将文章部署到gitHub
3.1 创建github仓库
首先,你得有一个github账号,没有的话去申请一个吧。这里就不介绍了。
登陆github账号后,点击左上角的+号创建一个新的仓库:
进入到创建仓库界面
一切填完之后,就点击create repository按钮了。
这里有个注意点:
Repository name 不可以乱写,是固定的写法,也就是必须是你的用户名+github.io这种格式,
它也将是你个人博客的域名。也就是别人输入这个 网址来访问你的博客。
到这里仓库就创建完成了,我们下一步就是将它和我们init的那个文件夹关联。
3.2 配置本地文件
打开我们init好的那个文件夹,找到_config.yml文件,这就是全局配置文件,通过配置里面的参数,来与我们的github上的仓库进行关联。
打开这个文件,找到最下面:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:
这段代码,然后修改成这样:
deploy:
type: git #部署类型,使用github
repository: https://github.com/LZAscott/LZAscott.github.io.git #部署的仓库的https
branch: master #部署分支, 一般使用master主分支
message: update #默认类型
这里有两个重要的参数:(其他两个参数可以参照着写)
- type:Hexo之前的版本好像是填github,但是Hexo3.0之后,必须填git,我的Hexo是最新的3.2.0,填写git。
- repository这个参数,很重要,它就是用来链接我们在github上创建的创库。看网上有的人使用SSH,但是SSH配置起来相对有些复杂,我这里用的是HTTPS方式,也是可以成功的。
注意:每个参数的冒号(:)后面必须留一个空格,否则会出现语法错误
然后在终端输入:
npm install hexo-deployer-git --save
等出现信息:
└── hexo-deployer-git@0.1.0
接下来就可以把你的文章部署到github上去了。
在终端输入命令:
hexo d
hexo d
是hexo deployer
的缩写,
待终端出现:
INFO Deploy done: git
就表示成功啦。是不是有点小激动呢。
现在你可以在浏览器输入http://your_username.github.io
这里的your_username
就是你的github账号昵称
以后每次新建文章后,待你完成编辑。即可以执行下面几个命令来把新的文章部署到服务器上:
- hexo clean
- hexo g
- hexo d
附:
至此,Hexo和gitHub的部署算是完成了。接下来的任务就是优化你的主题了。
我使用的是Next主题,所以接下来将的是基于Next主题,如果喜欢其他主题的童学就关闭此页面了。
四、优化主题
4.1 Next主题的安装使用
首先用终端跳转到你通过Hexo init的根目录,然后在终端输入:
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
完成只有,进入站点的全局配置文件: _config.yml
找到 theme
字段,设置为
theme: next
到这里就可以验证一下主题是否被使用。终端输入:
hexo s -- debug
然后本地访问:http://localhost:4000 看看效果,在没有部署到github之前,一般都可以这样在本地进行预览。
关于站点全局配置文件_config.yml的其他一些参数:
# Site
title: Scott_Mr
subtitle: 越努力,越幸福
description:
author: Scott_Mr
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: lzascott.github.io
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:
默认的大致就这些,另外给主题添加相关功能的时候会慢慢加上一些参数。
4.2 给站点添加友情链接功能
直接在站点全局配置文件_config.yml添加参数:
#友情链接
links_title: 友情链接
links:
百度: http://www.baidu.com/
如果没有链接,那么友情链接不会显示,为了测试,可以随便写一个
4.3 给站点添加多说评论、热评、分享功能
直接在全局配置文件_config.yml添加参数:
# Disqus disqus评论, 与多说类似, 国内一般使用多说
#disqus_shortname:
duoshuo_shortname: test
# 多说热评文章 true 或者 false
duoshuo_hotartical: true
# 多说分享服务
duoshuo_share: true
duoshuo_info:
ua_enable: true
admin_enable: false
user_id:
admin_nickname:
注意: 这里的
duoshuo_shortname
是需要你去多说主页 注册一个账号,然后填写你的多说域名,这里填写的就是你在多说填写的域名
例如:我的是:http://test.duoshuo.com/
,那么我填写的就是test
* 这里配置的是所有页面都支持评论,但是后面有的页面不需要,比如标签页,分类页,关于等等,那么就单独设置。
4.4 配置个人头像
在主题配置文件(打开博客根目录/themes/next,这个路径,然后打开,主题配置文件_config.yml)里面找到avatar字段(ps:如果没有就添加)
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site directory(source/uploads): /uploads/avatar.jpg
avatar: http://test.jpg
我采用的是地址,并没有将图片放本地(你可以选择新浪微博的相册里面的图片链接)
4.5 Next主题选择
在主题配置文件_config.yml里面,找到scheme字段
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
- Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
- Mist - Muse 的紧凑版本,整洁有序的单栏外观
- Pisces - 双栏 Scheme,小家碧玉似的清新
我选择第三种,去掉#
,然后在第一个前面加个#
提醒:没进行一步都可以自己去本地预览,采用命令行hexo s -- debug
4.6 主题菜单配置
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories
about: /about
archives: /archives
tags: /tags
#commonweal: /404.html
# Enable/Disable menu icons.
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of menu item and value is the name of FontAwsome icon. Key is case-senstive.
# When an question mask icon presenting up means that the item has no mapping icon.
menu_icons:
enable: true
#KeyMapsToMenuItemKey: NameOfTheIconFromFontAwesome
home: home
about: user
categories: th
tags: tags
archives: archive
commonweal: heartbeat
- 如果需要添加你自己自定义的菜单,那么就只需要在
menu
下添加相关的菜单项,然后新建页面与之匹配,然后去next
主题目录的languages
目录下找到我们之前配置的主题所使用的语言,(我们用的是zh-Hans
)对其进行国际化。menu_icon
的设置采用key-value
。key
对应上面的menu
里面的菜单项,大小写一致,value
就是对应FontAwsome icon这个网站的图标的名字,去掉前缀icon
关于这里的所有的图标都支持从
FontAwsome icon
这个网站获取,当然也可以自己放在资源文件夹里(一般比如个人头像(avatar
),网站图标(favicon
)等)。当然也支持从网址获取,推荐使用七牛云存储。当然也可以使用新浪博客的相册,谷歌相册,甚至QQ空间,都可以,只要能获取到图片网址,并且你不会轻易删掉。
4.7 添加关于、标签、分类页面
菜单配置好了,但是我们还得新建一些页面与之匹配,否则点击进入找不到。这里说一下,对于标签页
和分类页
,我们需要在新建一篇文章的时候指定它的标签和分类。对于刚开始建立的博客,点进去可能是空的,所以等会新建一篇文章试试,这之前,先建立相关页面。
-
添加标签页
打开终端,进入博客根站点,输入:hexo new page tags
进入博客根目录/source路径,找到tags文件夹,可以看到生成了index.md文件。可以使用编辑器打开,在里面添加
tags
和comments
tags
设置页面的类型comments
用来控制是否显示评论的
-
添加分类页
hexo new page categories
进入博客根目录/source路径,找到categories文件夹,可以看到生成了index.md文件。可以使用编辑器打开,在里面添加
categories
和comments
categories
设置页面类型comments
用来控制是否显示评论的
-
添加关于页
hexo new page about
进入博客根目录/source路径,找到about文件夹,可以看到生成了index.md文件。可以使用编辑器打开,在里面添加
about
和comments
about
设置页面类型comments
用来控制是否显示评论的
新建一篇文章给它添加分类和标签试试吧:
hexo new "Hexo教程"
通过有Markdown语法的编辑器打开:添加tags
和 categories
---
title: title #文章标题
date: 2016-06-04 21:47:44 #文章生成时间
categories: "Hexo教程" #文章分类目录 可以省略
tags: #文章标签 可以省略
- 标签1
- 标签2
description: #你对本页的描述 可以省略
---
4.8 Next主题侧边栏社交链接
打开主题配置文件_config.yml:
# ---------------------------------------------------------------
# Sidebar Settings
# ---------------------------------------------------------------
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social:
GitHub: https://github.com/LZAscott
新浪微博: http://weibo.com/3328555050/profile?rightmod=1&wvr=6&mod=personinfo&is_all=1
# Social Links Icons
# Icon Mapping:
# Map a menu item to a specific FontAwesome icon name.
# Key is the name of the item and value is the name of FontAwsome icon. Key is case-senstive.
# When an globe mask icon presenting up means that the item has no mapping icon.
social_icons:
enable: true
# Icon Mappings.
# KeyMapsToSocalItemKey: NameOfTheIconFromFontAwesome
GitHub: github
# Twitter: twitter
Weibo: weibo
这里的配置和Menu里一样
social
后面跟着的是你的社交网站的主页地址social_icons
是FontAwesome
网站的图标名称
4.9 开启打赏功能
很简单,打开主题配置文件_config.yml,添加字段:
reward_comment: 坚持原创技术分享,您的支持将鼓励我继续创作!
alipay: http://7xv28v.com1.z0.glb.clouddn.com/IMG_1070.JPG
注意:alipay: 填写的是支付宝或者微信的收款二维码图片地址。
4.10 设置网站的图标Favicon
favicon图标也就是我们打开一个网页,出现在最浅的图标样式,可以自定义,首先我们需要一个favicon.ico的图标,图标制作好后,上传到云存储空间,获取图片的网址,然后打开主题配置文件_config.yml,找到favicon字段,将图片网址粘贴在后面,即可。
4.11 结束语
到此,搭建博客的整个过程就已经完成了,你现在可以在本地预览,也可以将它部署到github上去了。
终端执行这三个步骤:
- hexo clean
- hexo g
- hexo d
然后在浏览器上输入your_name.github.io
去欣赏吧。