[ubuntu篇] 使用Github Pages 和hexo 創建我的博客，自定義域名，https加密，搜索引擎google,baidu,360收錄

時間  2019-11-25
標籤 ubuntu 使用 github pages hexo 創建 我的 博客 自定義 域名 https 加密 搜索引擎 google 收錄 欄目 Ubuntu 简体版
原文   原文鏈接

爲了更好的閱讀體驗，歡迎閱讀原文。原文連接在此。css

Part 1: Using Github Pages and Hexo to manage personal blogs.html

Series

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.node

use Github to create repo

  1. create a new repo in github, name by username.github.io: kezunlin.github.iojquery

  2. Setting | Automatic Page Generator, choose a theame and deploy.git

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 
複製代碼

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 -v 
複製代碼

test node

cat hello.js
console.log('Hello World');

node hello.js
Hello World
複製代碼

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
複製代碼

use cnpm instead of npm (optional)github

# cnpm install 
sudo cnpm install hexo-cli -g

# check version
hexo -v
複製代碼

create hexo site

cd workspace
mkdir blog
cd blog

hexo init
#npm install
hexo generate
hexo server
複製代碼

now we can visit localhost:4000 and create posts.web

deploy to github

vim blog/_config.ymlchrome

 deploy:
 type: git
 repo:   git@github.com:kezunlin/kezunlin.github.io.git
 branch: master
複製代碼

generate ssh-key and copy to githubnpm

# 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
複製代碼

now we can visit kezunlin.github.io/vim

add README and skip render

  1. add README.md to source folder

  2. edit blog/_config.yml to skip render README.md

    skip_render:
     - README.md
複製代碼

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
複製代碼

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
複製代碼

Hexo short commands:

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
複製代碼

Hexo composite commands:

hexo server -g
hexo deploy -g
複製代碼

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
---
複製代碼

more to control web display

<!--more-->
Use static blog framework Hexo to manage site
-----------------------------------------------
複製代碼

Use next theme

cd blog
git clone https://github.com/iissnan/hexo-theme-next themes/next
複製代碼

vim blog/_config.yml

#theme: landscape
 theme: next
複製代碼

Avatar

edit blog\themes\next\_config.yml

 avatar: /images/avatar.jpg
複製代碼

Plugins

install plugin by

npm install <plugin-name> --save
複製代碼

hexo admin

cnpm install --save hexo-admin
複製代碼

now we can visit http://localhost:4000/admin/

git deployer

npm install hexo-deployer-git --save
hexo deploy
複製代碼

rss feed

npm install hexo-generator-feed --save

# visit http://localhost:4000/atom.xml
複製代碼

sitemap

npm install hexo-generator-sitemap --save
複製代碼

vim blog/_config.yml

sitemap:
 path: sitemap.xml
複製代碼

now we can visit http://localhost:4000/sitemap.xml

baidu sitemap

npm install hexo-generator-baidu-sitemap --save
複製代碼

vim blog/_config.yml

baidusitemap:
 path: baidusitemap.xml
複製代碼

now we can visit http://localhost:4000/baidusitemap.xml

perment link

cnpm install hexo-abbrlink --save
複製代碼

edit blog\_config.yml

 permalink: post/:abbrlink/
 abbrlink:
 alg: crc32  # crc16(default) and crc32
 rep: hex    # dec(default) and hex
複製代碼

will fill abbrlink in your post.md

 ---
 title: Hello World
 categories:
 - tutorial
 tags:
 - hexo
 abbrlink: 4a17b156
 date: 2017-12-26 17:20:10
 ---
複製代碼

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
複製代碼

tags list page

hexo new page "tags"
# generate source/tags/index.md
複製代碼

edit source/tags/index.md

 ---
 title: tags
 date: 2017-12-27 15:46:09
 type: "tags"
 ---
複製代碼

now we can visit http://localhost:4000/tags/

categories list page

hexo new page "categories"
# generate source/categories/index.md
複製代碼

edit source/categories/index.md

 ---
 title: categories
 date: 2017-12-27 15:46:03
 type: "categories"
 ---
複製代碼

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
複製代碼

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
複製代碼

install_hexo_plugins.sh

#!/bin/bash 
cnpm 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 --save
複製代碼

Upload images to cnblog

  1. install img-uploader chrome extension by here
  2. upload image and get url.
  3. use url in markdown.
![image here](http://images2017.cnblogs.com/.../123.png)
複製代碼

Multiple deploy

  • deploy to github.com: username.github.io
  • deploy to coding.net (gitcaffe): username

vim blog/_config.yml

deploy:
 type: git
 repo:
 github: git@github.com:<username>/<username>.github.io.git,master
 coding: git@git.coding.net:<username>/<username>.git,master
複製代碼

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
複製代碼

we get

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
複製代碼
  • A: point to 185.199.109.153
  • CNAME: point to kezunlin.me

steps:

  1. get kezunlin.me from Godaddy.com
  2. add kezunlin.me to github blog's blog\source\CNAME file
  3. 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
  4. 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
複製代碼

Active means nameservers take effect.

configure

Crypto | Always use HTTPS
Page Rules| 2 rules for Always use HTTPS
複製代碼

custom domain

  1. register domin in godaddy: kezunlin.me
  2. add kezunlin.me to dnspod and get dnspod nameservers.
  3. visit https://dcc.godaddy.com/manage/kezunlin.me/dns#divDnsManagement to add dnspod nameservers.
f1g1ns1.dnspod.net
f1g1ns2.dnspod.net
複製代碼
  1. add CNAME records in dnspod
@ CNAME 207.97.227.245  # for github pages
複製代碼
  1. vim blog/source/CNAME
kezunlin.me
複製代碼

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="***" />
複製代碼

get google_analytics and edit themes\next\_config.yml

 google_analytics: UA-***
複製代碼

google structured-data

  1. grep search for keywords
grep -r Organization .
    ./themes/next/layout/_macro/post.swig:    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
複製代碼

add logo for publisher

  1. edit themes\next\_config.yml and add

    logo: /images/logo.png

  2. 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> 
複製代碼

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="***" />
複製代碼

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="***" />
複製代碼

gitment for comment

We can use github repo to store blog site's comments in issues

register OAuth Application

  1. visit github.com/settings/ap…
  2. fill in blanks, callback URL: https://kezunlin.me
  3. get client ID and client secret

gitment config

  1. create a new repo named gitment in Github for storing comments in issues
  2. 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
複製代碼

Notice

  • github_user: kezunlin
  • github_repo: gitment

init page comment

  1. hexo deploy to deploy blogs
  2. visit page and click button Initialize Comment
  3. 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
複製代碼

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> 訪問人數
 site_uv_footer:
        # custom pv span for the whole site
 site_pv: true
 site_pv_header: <i class="fa fa-eye"></i> 總訪問量
 site_pv_footer:
        # custom pv span for one page only
 page_pv: true
 page_pv_header: <i class="fa fa-eye"></i> 閱讀次數
 page_pv_footer:
複製代碼

hexo-all-minifier (not)

npm install hexo-all-minifier --save
複製代碼

edit blog\_config.yml

 all_minifier: true
複製代碼

Tips: not enable minifier currently because not stable.

hexo-neat

npm install hexo-neat --save
複製代碼

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'
複製代碼

403 error

edit themes/next/layout/_partials/head.swig

<meta name="referrer" content="no-referrer" />
複製代碼

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>
複製代碼

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.
複製代碼

jquery

jquery: https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js
複製代碼

gitmint

  1. download gitmint files to themes\next\source\lib

    tree gitmint/
 gitmint/
 ├── dist
 │   └── gitmint.browser.js
 └── style
     └── default.css

 2 directories, 2 files
複製代碼

  2. 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>
複製代碼
  1. edit _config.yml to skip gitmint file
skip_render: # relative to source/ folder
        - README.md
        - lib/gitmint/dist/*.js
        - lib/gitmint/style/*.css
複製代碼

faq

errors:

hexo -v
ERROR Local hexo not found in /home/kezunlin/git/blog
複製代碼

solution:

cd blog
rm node_modules
cnpm install --save
複製代碼

Reference

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程