利用Hexo+Github轻轻松松搭建酷炫的个人Blog!
本人环境:

  • Ubantu 18.04
  • Hexo 3.8.0
  • Node.js 8.10.0
  • NexT 7.0.0

下面正式开始:

1.安装Hexo

准备工作:

  • 安装Node.js
  • 安装Git

安装Node.js:

在终端输入:
curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

or
wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安装完成后输入:
nvm install stable

查看是否安装成功
node -v

成功如下图:
成功安装Node.js

安装Git

sudo apt-get install git-core

开始安装Hexo

npm install -g hexo-cli

安装成功如下:
Hexo

部署Blog到本地

首先新建一个文件夹放置Blog文件,例如

mkdir MyBlogcd 
~/MyBlog

初始化

hexo init
hexo g
hexo s

看到下图,复制http://localhost:4000 到浏览器即可预览
init

在终端输入ctrl+c则停止预览

NexT主题

下面给我们的Blog换一个好看的主题吧~
本人选择的是NexT
更多主题可以在查看

下载NexT主题到本地

cd ~/MyBlog  
git clone https://github.com/theme-next/hexo-theme-next themes/next

看到**~/MyBlog/theme/next**就说明下载成功了!

个性化

接下给Blog定制一些酷炫的效果和功能吧~
这里只介绍本人的一些设置
更多设置可以查看官方文档
每更改一次配置都可以通过hexo s命令在http://localhost:4000查看效果

首先用IDE打开MyBlog文档吧(用vim等直接编辑配置文件也是可以的,个人喜欢),本人选用WebStorm

修改主题为NexT

打开**~/MyBlog/_config.yml**
theme设置为next即可
theme

更改网站标题、作者名、语言

打开**~/MyBlog/_config.yml**
title
更多语言设置
language

开启tags、categories、about页面

打开**~/MyBlog/theme/next/_config.yml**,找到**menu **
menu

再打开终端输入

hexo n page "tags"
hexo n page "categories"
hexo n page "about"

这时候可以看到 ~/MyBlog/source 中多了三个文件夹,每一个文件夹都有一个index.md文件,分别打开这三个文件,修改为
tags

categories

about
about/index.md文件中可以用MarkDown编写自己的个人介绍等

更改NexT主题样式

打开**~/MyBlog/theme/next/_config.yml文件,找到scheme **
可以看到NexT主题提供四种样式,默认为Muse,可根据个人喜欢修改样式,本人选择的是默认
scheme

开启个人社交平台链接

打开 ~/MyBlog/theme/next/_config.yml 文件,找到 social,根据自己的需要设置即可
social

友情链接

打开 ~/MyBlog/theme/next/_config.yml文件,找到links,可以挂朋友的Blog~
links

更换个人头像、设置为圆形头像、头像旋转特效

将自己喜欢的头像放到 ~/MyBlog/theme/next/source/images中,打开 ~/MyBlog/theme/next/_config.yml 文件,找到avatar
avatar

  • rounded: true 则头像为圆形
  • rotated: true 则鼠标放置到头像,头像会有旋转特效

阅读全文

如果不想首页的博文全部展开,开启阅读全文功能是一个不错的选择~
打开 ~/MyBlog/theme/next/_config.yml文件,找到 **auto_excerpt **
auto_excerpt
length 属性是博文的预览长度

评论功能

使用Valine插件实现评论功能
leancloud注册账号,新建一个应用(开发版即可),设置->应用key,复制APP ID和APP Key,打开 ~/MyBlog/theme/next/_config.yml文件,找到 Valine,将 enable设置为 true,并将 IDKey填到相应位置即可
valine

开启不蒜子计数功能,记录访问人数等

打开 ~/MyBlog/theme/next/_config.yml文件,找到 busuanzi_count
busuanzi

开启搜索功能

打开终端,输入
npm install hexo-generator-searchdb --save

将以下代码复制到 ~/MyBlog/theme/next/_config.yml的末尾

search:  
  path: search.xml  
  field: post  
  format: html  
  limit: 10000  

~/MyBlog/theme/next/_config.yml文件,找到local_search,设置为true即可
search

RSS订阅功能

在终端输入
npm install hexo-generator-feed --save

~/MyBlog/theme/next/_config.yml文件,找到 rss
rss
并在 ~/MyBlog/_config.yml的底部添加以下代码

# RSS订阅
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '

给头部加个酷炫的壁纸

将自己喜欢的壁纸放入 ~/MyBlog/themes/next/source/images,打开 ~/MyBlog/themes/next/source/css/_common/components/header/header.styl
将配置修改为如下
header

给侧边信息栏加个酷炫的壁纸

打开 ~/MyBlog/themes/next/source/css/_common/components/sidebar/sidebar.styl
将配置修改如下
sidebar

所有的个性化设置就结束啦~在本地预览效果还是蛮酷炫的吧!下面通过与Github仓库链接,可以让大家都访问到你酷炫的Blog,接着往下看吧~

与Github仓库连接

首先你得有一个Github的账号,没有的小伙伴自己去注册一个吧!

首先新建一个仓库,仓库名必须是yourname.github.io,例如
github
进入~/MyBlog,在终端输入,将 yournameyour-e-mail替换成自己的Github用户名和邮箱

git config --global uear.name "yourname"
git config --global user.email "your-e-mail"

如果是第一次使用Github的话,还需要设置SSH Key,这样就可以在本地将你的Blog部署到Github上
不是第一次使用Github的老司机可以直接跳过,这里假设你是第一次使用Github
打开终端,输入(需替换成自己的邮箱)

ssh-keygen -t rsa -C "youremail@example.com"

然后一路回车即可
在终端输入

cd ~/.ssh
ls

可以看到有 id_rsaid_rsa.pub两个文件
打开Github的 setting找到 SSH and GPG keys
ssh
点击
newssh

add
再点击 ADD SSH key即可
在终端输入下面命令,判断是否成功

ssh -T git@github.com

sshsuccess

打开 ~/MyBlog/_config.yml,配置 Deployment,修改为以下代码,并将Elitedj更换成自己的用户名即可

deploy:
  type: git
  repo: git@github.com:Elitedj/Elitedj.github.io.git
  branch: master

打开终端输入

npm install hexo-deployer-git --save
hexo g
hexo d

打开浏览器,输入 yourname.github.io就可以访问到你的Blog啦,并且 yourname.github.io就是你的Blog域名

设置域名

有的小伙伴不喜欢 yourname.github.io,想设置一个别的域名,再指向自己的Github Page,就像本站可以通过elitedj.me访问

购买域名

Godaddy上购买一个域名
购买过程不详细介绍~

设置DNS

我的产品里找到自己刚买的域名,点击 DNS
godaddy
自定义域名服务器为

f1g1ns1.dnspod.net
f1g1ns2.dnspod.net

dns

Dnspod注册一个账号,在域名解析里增加自己的域名,添加两条记录
A记录:
首先查看 yourname.github.ioIP地址
ip
添加一条A记录
a

CNAME记录:
cname

打开自己的Github仓库,新建一个 CNAME文件,并在里面输入自己购买的域名
githubcname

过一段时间就可以通过自己购买的域名访问自己的Blog了

开启自己的第一篇Blog

这个时候整个Blog的搭建已经完成,来开启你的第一篇Blog吧
在~/MyBlog输入

hexo n "your-title"

~/MyBlog/source/_posts就可以看到一个md文件,打开这个文件就可以用MarkDown语法编写自己的文章啦~
可以再文件的开头表明本文的标签和分类
paper

编写完成后,在终端输入

hexo g
hexo d

就可以部署到Github上,此时此刻大功告成啦~
更多的东西就自己探索啦~
有任何疑问可以在本文下面评论告诉我哦
感谢阅读!