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 render README.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 from Godaddy.com
add kezunlin.me to github blog’s blog\source\CNAME file
register CloudFlare.com and add A record with github page IP 185.199.109.153 and get dns nameservers dina.ns.cloudflare.com and paul.ns.cloudflare.com
add dns nameservers dina.ns.cloudflare.com and paul.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 add

logo: /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 and client 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.

jiathis

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.

[Ubuntu] Use Github Pages and Hexo to create a personal blog, custom domain name, HTTPS encryption, search engine Google, Baidu,360

Series

Hexo Tutorial

use Github to create repo

install by apt-get

install nodejs from source

test node

install hexo

create hexo site

deploy to github

add README and skip render

new post and deploy again

Appendix

Hexo commands

Post content

header template

more to control web display

Use next theme

Avatar

Plugins

hexo admin

git deployer

rss feed

sitemap

baidu sitemap

perment link

index/archive/category/tag

tags list page

categories list page

local search

install_hexo_plugins.sh

Upload images to cnblog

Multiple deploy

Advanced

custom domain and https

custom domain

google analytics

google structured-data

baidu zhanzhang

360 zhanzhang

gitment for comment

register OAuth Application

gitment config

init page comment

share

jiathis

baidushare (RE)

stats

busuanzi

hexo-all-minifier (not)

hexo-neat

403 error

optimize for speed

multiple deploy

compress

cdn

faq

Reference

History

Copyright

Related Posts

Order of execution of try Catch Finally with return (most persuasive summary)

Docker + Verdaccio build NPM private library

Override brief analysis of keyword