For a better reading experience, please read the original article.The original linkIn this.
Part 1: Using Github Pages and Hexo to manage personal blogs.
Series
- Part 1: Using Github Pages and Hexo to manage personal blogs on Ubuntu.
- Part 2: Using Github Pages and Hexo to manage personal blogs on windows.
Hexo Tutorial
Github recommends us to use Jekyll to manage static pages, which is based on Ruby and is difficult for us to install and configure. So we use Hexo instead. Hexo is a static blog framework similar to Jekyll ,which is based on Node.js and easier for use to use.
use Github to create repo
-
create a new repo in github, name by
username
.github.io:kezunlin.github.io
-
Setting | Automatic Page Generator, choose a theame and deploy.
install by apt-get
sudo apt-get -y install nodejs
sudo apt-get -y install nodejs-legacy
sudo apt-get -y install npm
node -v
npm -v
Copy the code
install nodejs from source
# download and compile wget https://nodejs.org/dist/v8.9.3/node-v8.9.3.tar.gz tar XZVF node - v8.9.3. Tar. Gz CD node - v8.9.3 ./configure make -j8 sudo make install # link to /usr/bin sudo ln -s /usr/local/bin/node /usr/bin/node sudo ln -s /usr/local/bin/npm /usr/bin/npm # check version node -v npm -vCopy the code
test node
cat hello.js
console.log('Hello World');
node hello.js
Hello World
Copy the code
install hexo
# install hexo globally
sudo npm install hexo-cli -g
#sudo npm install hexo --save
# use cnpm from taobao instead of offical npm, which is slow for chinese users.
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code
use cnpm
instead of npm
(optional)
# cnpm install
sudo cnpm install hexo-cli -g
# check version
hexo -v
Copy the code
create hexo site
cd workspace
mkdir blog
cd blog
hexo init
#npm install
hexo generate
hexo server
Copy the code
now we can visit localhost:4000 and create posts.
deploy to github
vim blog/_config.yml
deploy:
type: git
repo: [email protected]:kezunlin/kezunlin.github.io.git
branch: master
Copy the code
generate ssh-key and copy to github
# generate ssh-key
cd ~
ssh-keygen
cat .ssh/id_rsa.pub
# copy content to github
# https://github.com/settings/keys
# install plungin and deploy to github
npm install hexo-deployer-git --save
hexo deploy
Copy the code
now we can visit kezunlin.github.io/
add README and skip render
-
add
README.md
to source folder -
edit
blog/_config.yml
to skip renderREADME.md
skip_render: - README.md Copy the code
use hexo generate
to copy README.md
from source/ to public/
new post and deploy again
hexo new 'first post'
vim source/_posts/first-post.md
hexo generate
hexo server
hexo deploy
Copy the code
now we can visit kezunlin.github.io/ and see our first post.
Appendix
Hexo commands
Hexo common commands:
hexo new "postName" #new post
hexo new page "pageName" #new page
hexo generate #generate static files to public/
hexo server #start server on localhost:4000
hexo deploy #push .deploy_git/ to GitHub
hexo clean #clean files
Copy the code
Hexo short commands:
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
Copy the code
Hexo composite commands:
hexo server -g
hexo deploy -g
Copy the code
Post content
header template
---
title: Using Github Pages and Hexo to manage personal blogs
date: 2017-12-26 17:28:10
categories: tutorial
tags:
- github pages
- hexo
- nodejs
- npm
---
Copy the code
more to control web display
<! --more--> Use static blog framework Hexo to manage site -----------------------------------------------Copy the code
Use next theme
cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
Copy the code
vim blog/_config.yml
#theme: landscape
theme: next
Copy the code
Avatar
edit blog\themes\next\_config.yml
avatar: /images/avatar.jpg
Copy the code
Plugins
install plugin by
npm install <plugin-name> --save
Copy the code
hexo admin
cnpm install --save hexo-admin
Copy the code
now we can visit http://localhost:4000/admin/
git deployer
npm install hexo-deployer-git --save
hexo deploy
Copy the code
rss feed
npm install hexo-generator-feed --save
# visit http://localhost:4000/atom.xml
Copy the code
sitemap
npm install hexo-generator-sitemap --save
Copy the code
vim blog/_config.yml
sitemap:
path: sitemap.xml
Copy the code
now we can visit http://localhost:4000/sitemap.xml
baidu sitemap
npm install hexo-generator-baidu-sitemap --save
Copy the code
vim blog/_config.yml
baidusitemap:
path: baidusitemap.xml
Copy the code
now we can visit http://localhost:4000/baidusitemap.xml
perment link
cnpm install hexo-abbrlink --save
Copy the code
edit blog\_config.yml
permalink: post/:abbrlink/
abbrlink:
alg: crc32 # crc16(default) and crc32
rep: hex # dec(default) and hex
Copy the code
will fill abbrlink
in your post.md
---
title: Hello World
categories:
- tutorial
tags:
- hexo
abbrlink: 4a17b156
date: 2017-12-26 17:20:10
---
Copy the code
index/archive/category/tag
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
Copy the code
tags list page
hexo new page "tags"
# generate source/tags/index.md
Copy the code
edit source/tags/index.md
---
title: tags
date: 2017-12-27 15:46:09
type: "tags"
---
Copy the code
now we can visit http://localhost:4000/tags/
categories list page
hexo new page "categories"
# generate source/categories/index.md
Copy the code
edit source/categories/index.md
---
title: categories
date: 2017-12-27 15:46:03
type: "categories"
---
Copy the code
now we can visit http://localhost:4000/categories/
local search
install search plugin
cnpm install hexo-generator-search --save
cnpm install hexo-generator-searchdb --save
Copy the code
edit themes\next\_config.yml
local_search:
enable: true # create a new 'Search' button next to 'Archives'
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
edit `_config.yml`
search:
path: search.xml
field: post
format: html
limit: 10000
Copy the code
install_hexo_plugins.sh
#! /bin/bashcnpm install hexo-deployer-git --save cnpm install hexo-generator-feed --save cnpm install hexo-generator-sitemap --save cnpm install hexo-generator-baidu-sitemap --save cnpm install hexo-generator-index --save cnpm install hexo-generator-archive --save cnpm install hexo-generator-category --save cnpm install hexo-generator-tag --save cnpm install hexo-generator-search --save cnpm install hexo-generator-searchdb --saveCopy the code
Upload images to cnblog
- install img-uploader chrome extension by here
- upload image and get url.
- use url in markdown.
! [image here](http://images2017.cnblogs.com/... /123.png)Copy the code
Multiple deploy
- deploy to github.com:
username.github.io
- deploy to coding.net (gitcaffe):
username
vim blog/_config.yml
deploy:
type: git
repo:
github: [email protected]:<username>/<username>.github.io.git,master
coding: [email protected]:<username>/<username>.git,master
Copy the code
Advanced
custom domain and https
- blog: Github pages
- SSL: CloudFlare
- domain: Godaddy (dns nameservers from CloudFlare)
get ips by
dig kezunlin.github.io +noall +answer
Copy the code
we get
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
Copy the code
- A: point to 185.199.109.153
- CNAME: point to kezunlin.me
steps:
- get
kezunlin.me
fromGodaddy.com
- add
kezunlin.me
to github blog’sblog\source\CNAME
file - register
CloudFlare.com
and addA
record with github page IP185.199.109.153
and get dns nameserversdina.ns.cloudflare.com
andpaul.ns.cloudflare.com
- add dns nameservers
dina.ns.cloudflare.com
andpaul.ns.cloudflare.com
from here
wait for some seconds and we get results from CloudFlare
kezunlin.me
Status: Active
This website is active on Cloudflare.
Universal SSL Status Active Certificate
Copy the code
Active
means nameservers take effect.
configure
Crypto | Always use HTTPS
Page Rules| 2 rules for Always use HTTPS
Copy the code
custom domain
- register domin in
godaddy
:kezunlin.me
- add
kezunlin.me
to dnspod and get dnspod nameservers. - visit
https://dcc.godaddy.com/manage/kezunlin.me/dns#divDnsManagement
to add dnspod nameservers.
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
Copy the code
- add CNAME records in dnspod
@ CNAME 207.97.227.245 # for github pages
Copy the code
- vim
blog/source/CNAME
kezunlin.me
Copy the code
google analytics
get google-site-verification
from google search console and add to themes/next/layout/_partials/head.swig
<meta name="google-site-verification" content="***" />
Copy the code
get google_analytics
and edit themes\next\_config.yml
google_analytics: UA-***
Copy the code
google structured-data
- grep search for keywords
grep -r Organization .
./themes/next/layout/_macro/post.swig: <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
Copy the code
add logo
for publisher
-
edit
themes\next\_config.yml
and addlogo: /images/logo.png
-
edit
./themes/next/layout/_macro/post.swig
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="{{ config.title }}">
<img itemprop="logo" src="{{ url_for( theme.logo ) }}" />
#<img itemprop="logo" src="/images/logo.png" />
</span>
Copy the code
baidu zhanzhang
get baidu-site-verification
from https://ziyuan.baidu.com/
and add to themes/next/layout/_partials/head.swig
<meta name="baidu-site-verification" content="***" />
Copy the code
360 zhanzhang
get 360-site-verification
from http://zhanzhang.so.com/sitetool/
and add to themes/next/layout/_partials/head.swig
<meta name="360-site-verification" content="***" />
Copy the code
gitment for comment
We can use github repo to store blog site’s comments in issues
register OAuth Application
- Visit github.com/settings/ap…
- fill in blanks, callback URL:
https://kezunlin.me
- get
client ID
andclient secret
gitment config
- create a new repo named
gitment
in Github for storing comments in issues - edit
blog\themes\next\_config.yml
gitment:
enable: true
mint: true # RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway
count: true # Show comments count in post meta area
lazy: true # Comments lazy loading with a button
cleanly: false # Hide 'Powered by ... ' on footer, and more
language: zh-Hans # Force language, or auto switch by theme
github_user: kezunlin # MUST HAVE, Your Github ID
github_repo: gitment # MUST HAVE, The repo you use to store Gitment comments
client_id: < * * * > # MUST HAVE, Github client id for the Gitment
client_secret: < * * * > # EITHER this or proxy_gateway, Github access secret token for the Gitment
proxy_gateway: # Address of api proxy, See: https://github.com/aimingoo/intersect
redirect_protocol: # Protocol of redirect_uri with force_redirect_protocol when mint enabled
Copy the code
Notice
- github_user: kezunlin
- github_repo: gitment
init page comment
hexo deploy
to deploy blogs- visit page and click button
Initialize Comment
- post your first comment.
share
jiathis
register jiathis and get uid
jiathis
and baidushare
do not support https
baidushare (RE)
fix to support https
cd blog
git clone https://github.com/hrwhisper/baiduShare.git
mv baiduShare source
#rm -rf baiduShare
# make sure we can access localhost:4000/baiduShare/static/api/js/share.js
# edit baidushare.swig
grep -r 'bdimg.share.baidu.com' .
vim ./themes/next/layout/_partials/share/baidushare.swig
# change //bdimg.share.baidu.com/ to /baiduShare
<script>
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/baiduShare/static/api/js/share.js? cdnversion='+~(-new Date()/36e5)];
</script>
# there exists a bug in share.js
hexo generate
hexo server
Copy the code
stats
busuanzi
edit blog\themes\next\_config.yml
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: <i class="fa fa-user"></i> Access number
site_uv_footer:
# custom pv span for the whole site
site_pv: true
site_pv_header: <i class="fa fa-eye"></i> Total visits
site_pv_footer:
# custom pv span for one page only
page_pv: true
page_pv_header: <i class="fa fa-eye"></i> Read the number
page_pv_footer:
Copy the code
hexo-all-minifier (not)
npm install hexo-all-minifier --save
Copy the code
edit blog\_config.yml
all_minifier: true
Copy the code
Tips: not enable minifier currently because not stable.
hexo-neat
npm install hexo-neat --save
Copy the code
edit blog\_config.yml
# hexo-neat
neat_enable: true
neat_html:
enable: true
exclude:
neat_css:
enable: true
exclude:
- '*.min.css'
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '*.min.js'
Copy the code
403 error
edit themes/next/layout/_partials/head.swig
<meta name="referrer" content="no-referrer" />
Copy the code
optimize for speed
multiple deploy
deploy to coding.net
.
vim themes/next/layout/_partials/footer.swig
<p>Hosted by <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a></p>
Copy the code
compress
use hexo-neat
or hexo-all-minifier
.
Tips: no use, it may cause longer time to load page.
cdn
NOTICE:
We can not use fourth level `####` for header,
otherwise post page will not display properly.
Copy the code
jquery
Jquery: https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.jsCopy the code
gitmint
-
download gitmint files to
themes\next\source\lib
Tree gitmint gitmint / ├ ─ ─ dist │ └ ─ ─ gitmint. The js └ ─ ─ style └ ─ ─. The default CSS 2 directories, 2 filesCopy the code
-
edit
./themes/next/layout/_third-party/comments/gitment.swig
#<link rel="stylesheet" href="/lib/gitmint/style/default.css">
#<script src="/lib/gitmint/dist/gitmint.browser.js"></script>
Copy the code
- edit
_config.yml
to skip gitmint file
skip_render: # relative to source/ folder
- README.md
- lib/gitmint/dist/*.js
- lib/gitmint/style/*.css
Copy the code
faq
errors:
hexo -v
ERROR Local hexo not found in /home/kezunlin/git/blog
Copy the code
solution:
cd blog
rm node_modules
cnpm install --save
Copy the code
Reference
- third party services
- gitment
- hexo image manage
- hexo prement link
- using cnblogs and chrome extension to upload iamges
- img uploader
- baidushare support https
- hexo minifier
- hexo neat
- domain dnspod godaddy
- use https
- optimize for speed
- ssl for github blog
- ssl
- github page IP
- google adsense demo site
- google adsense for hexo blog
History
- 2017/12/26: created.
- 2017/12/27: add Appendix,use next theame,add tags/categories page.
- 2017/12/28: add Advanced, use gitment,baidushare,local search,etc.
- 2018/01/02: upload images to cnblogs.
- 2018/01/03: hexo-neat to compress,cdn,etc.
- 2018/01/22: add part2.
- 2018/09/05: add ssl.
- 2019/11/07: reorganize post contents.
Copyright
- Post author: kezunlin
- Post the link: kezunlin. Me/Post / 98 df88…
- Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 3.0 unless covered only in English.