环境
Mac os安装Homebrewg
软件包
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install caskroom/cask/brew-cask // Homebrew Cask,该包管理器会自动配置好环境变量
安装Node.js
brew install node
安装Git
brew cask install git
查看node npm git
版本是否正确
node -v
npm -v
git --version
安装Hexo
npm install -g hexo-cli //安装Hexo
hexo init hexo //创建一个目录,用于放置你的Hexo博客
npm install // Hexo的安装和初始化
测试Hexo
hexo server // 运行本地服务测试
终端会显示如下所示
INFO Hexo is at http://localhost:4000/. Press Ctrl+C to stop
在浏览器输入http://localhost:4000/
即可打开默认页面,说明Hexo博客搭建成功
Hexo博客文件夹目录结构说明
source:博客资源文件夹
source/_drafts:草稿文件夹
source/_posts:文章文件夹
themes:存放主题的文件夹
themes/landscape:默认的主题
_config.yml:全局配置文件
部署到Github Pages
我们的Hexo本地服务完成了,要想供外网访问,我们要部署到服务器上,这里我们选择部署到Github Pages
创建一个repository
,名称开头必须和账号一样
,然后以.github.io
如下所示
nnianhou-.github.io
修改_config.yml
配置文件,打开配置文件,找到如下位置,修改repository地址,就是你刚才创建仓库的地址
deploy:
type: git
repository: https://github.com/nnianhou-/nnianhou-.github.io.git
branch: master
添加ssh key到Github
为避免每次输入Github用户名和密码的麻烦,我们配置ssh
检查SSH keys
是否存在。如果有文件id_rsa.pub
或id_dsa.pub
,则直接将key添加到Github中,否则进入下一步生成SSH key。
$ ls -al ~/.ssh
生成新的ssh key,注意将[email protected]
换成你自己注册Github的邮箱地址。
$ ssh-keygen -t rsa -C "[email protected]"
默认会在相应路径下(~/.ssh/id_rsa.pub)生成id_rsa
和id_rsa.pub
两个文件。
将ssh key添加到Github中
Find前往文件夹~/.ssh/id_rsa.pub
打开id_rsa.pub
文件,里面的信息即为SSH key,将这些信息复制到Github的Add SSH key页面即可。
进入Github --> Settings --> SSH keys --> add SSH key:
Title里任意添一个标题,将复制的内容粘贴到Key里,点击下方Add key绿色按钮即可。
绑定个人域名
现在使用的域名是Github提供的二级域名,也可以绑定为自己的个性域名。域名我是在万网买的,可直接在其网站做域名解析。
Github端:
在/blog/themes/landscape/source
目录下新建文件名为:CNAME
文件,注意没有后缀名!直接将自己的域名如:miaodalive.com
写入。
终端cd到blog目录下执行如下命令重新部署:
hexo clean
hexo d -g
域名解析:
如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录。登录万网,在你购买的域名后边点击:解析 --> 添加解析
记录类型: CNAME
主机记录:将域名解析为example.com(不带www),填写@或者不填写
记录值: miaodalive.github.io.
(不要忘记最后的.
,miaodalive
改为你自己的用户名),点击保存即可
此时,点击访问http://miaodalive.com
和访问http://nnianhou-.github.io
效果一致,大功告成!
将个人博客同时部署到 GitHub 和 Coding
首先到 Coding 上注册并开一个项目,项目名称和用户个性后缀相同(方便二级域名访问博客),拿到项目的 https 地址https://git.coding.net/nnianhou/nnianhou.git
打开本地 blog 目录下的 _config.yml
文件,修改如下:
deploy:
type: git
repository:
github: https://github.com/nnianhou-/nnianhou-.github.io.git
coding: https://git.coding.net/nnianhou/nnianhou.git
branch: master
cd 到本地 blog/source
目录下执行如下命令新建 Staticfile
文件
touch Staticfile #名字必须是Staticfile
原因是 coding.net
需要以这个文件来作为静态文件部署的标志,就是说看到这个 Staticfile
就知道按照静态文件来发布。
执行发布命令:
hexo d -g
个人域名添加两条 CNAME
解析。将 miaodalive.github.io.
解析为 [海外]
,将 miaodalive.coding.me.
解析为 [默认]
这样就是为了从国内访问 miaodalive.com
就是访问 Coding
上的博客项目,从国外访问 miaodalive.com
就是访问 GitHub
上的博客项目。
到 Coding 上的博客项目主页,点击 Pages
服务 输入部署分支 master 立即开启
这样就可以访问自己在 Coding 上的个人博客了 miaodalive.coding.me/miaodalive
如果像这样你的用户后缀名与博客项目名称相同你还可以省略项目名称直接访问 miaodalive.coding.me
添加域名绑定,输入个人域名就 OK 了,可能需要耐心等待几分钟,这样在国内访问自己的博客就快得多了。
试了一下在国内访问 miaodalive.com
拦不住 要飞起来了
修改主题
如果要修改主题,只需要将主题文件clone到themes
目录下,并修改_config.yml
配置文件即可
进入hexo的themes目录,clone主题
git clone [email protected]:wuchong/jacman.git
然后修改配置文件的theme参数为jacman
即可
theme:jacman
发布第一篇博客
hexo new HelloWord
新生成的文章都会保存在/source/_posts
目录下,打开生成的博客,模板如下,这是生成文档的默认格式,在分割线下面,就可以按照正常的Markdown格式进行写作
title:HelloWord
date:20116-10-18 22:21:02
tags:
---
也可以将Markdown拷贝到/source/_posts
目录下
生成博客发布到服务器,安装hexo-deployer-git
工具
npm install hexo-deployer-git --save
提交到服务器上,提交过程中还需要输入github账号和密码
hexo deploy
成功后,这个时候你就可以打开你的github,进入 repository
的setting页面,往下滑,可以看到会显示出你的个人主页网址 http://nnianhou-.github.io
就可直接访问博客了
Hexo常用命令
hexo new "postName" //新建文章
hexo d -g // 修改后更新博客
Hexo博客Jacman主题的优化
在themes/你的主题/layout/_partial/footer.ejs
中最后面添加脚本:
添加总pv计数和总uv计数
在上面footer.ejs文件最后添加这两个计数脚本:
Total visits:
You are Visiter No.
添加文章访问计数
这里我添加到标题右下方,正文上面的地方。在themes/jacman/layout/_partial/post/header.ejs
中
class="article-time">
标签里面添加:
总阅读次
404页面
直接在根目录下创建自己的404.html或者404.md就可以
推荐使用腾讯公益
打赏功能
我们要实现的目标就是只需在themes\jacman\_config.yml
文件中添加如下语句:
donate:
enable: true
text: 打赏我的人,运气都不会太差~
wechat: http://ac-fmwkcchq.clouddn.com/079ce0e3beced7de32fa.jpeg
alipay: http://ac-fmwkcchq.clouddn.com/ccfe5d160b2b94b6e4c0.jpeg
web: true
我们想要将打赏功能嵌入到每一篇博客当中,所以我们需要改动文章显示的HTML模板。
找到themes\jacman\layout\_partial\post\article.ejs
这就是文章的HTML模板文件,在
的下面,<%- partial('footer') %>
的上面插入如下HTML代码:
<% if (theme.donate) { %>
<% } %>