为了更好的阅读体验,欢迎阅读原文。原文链接在此。

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

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.

use Github to create repo

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

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

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)

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

deploy to github

vim blog/_config.yml

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

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

now we can visit https://kezunlin.github.io/

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 https://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 https://github.com/settings/applications/new
  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

[ubuntu篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录的更多相关文章

  1. [windows篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录

    为了更好的阅读体验,欢迎阅读原文.原文链接在此. [windows篇] 使用Hexo建立个人博客,自定义域名https加密,搜索引擎google,baidu,360收录 Part 2: Using G ...

  2. 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法

    title: 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法 toc: false date: 2018-04-16 22:57:50 cat ...

  3. Windows下通过GitHub+Hexo搭建个人博客的步骤

    Windows下通过GitHub+Hexo搭建个人博客的步骤  https://blog.csdn.net/namechenfl/article/details/90442312 https://bl ...

  4. 利用Hexo搭建个人博客-博客初始化篇

    上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境.相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面,让 ...

  5. 使用hexo和coding建立静态博客站点

    背景 由于工作性质的原因,做技术的总想记录和分享一下自己的学习和成长历程,向这世界证明我来过.写文章,发博客,一开始使用51cto,广告太多,看起来让人很痛苦:接着试用了博客园,广告少一些,但感觉还是 ...

  6. 利用Hexo搭建个人博客-博客发布篇

    通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...

  7. 利用Hexo搭建个人博客-环境搭建篇

    我是一个爱写博客进行总结分享的人.然而,有着热爱写博客并且深知写博客好处的我,却没有好好的把这个习惯坚持下来.如今毕业已经一年多了吧,每一次与师弟师妹们聊天,我总会意味深长的建议他们,一定要定期梳理总 ...

  8. 使用github和hexo搭建静态博客

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...

  9. hexo搭建静态博客

    1. 环境环境 1.1 安装Git 请参考[1] 1.2 安装node.js 下载:http://nodejs.org/download/ 可以下载 node-v0.10.33-x64.msi 安装时 ...

随机推荐

  1. Spring使用AspectJ开发AOP:基于Annotation

    基于 Annotation 的声明式 在 Spring 中,尽管使用 XML 配置文件可以实现 AOP 开发,但是如果所有的相关的配置都集中在配置文件中,势必会导致 XML 配置文件过于臃肿,从而给维 ...

  2. PHP spl_autoload和class_exsits使用技能

    本文章的PHP使用版本:5.4.7 PHP建议使用: spl_autoload_register 那么写了一种实现 文件路径 core core.php ChildrenClass.php Paren ...

  3. Unity事件系统

    # 1.前言Unity中事件/委托有着广泛的应用,本文通过封装一个简易的事件的系统,来统一管理消息的传递.此功能在简易应用或者事件较少的体现不出太好的作用,但是对于事件应用较多时,可以减少脚本之间的耦 ...

  4. Mysql 性能优化及问题

    MySQL max_allowed_packet设置及问题 查看 max_allowed_packet show VARIABLES like '%max_allowed_packet%'; 以下内容 ...

  5. 一个自动管理项目的Makefile(C语言)

    Linux 是所有嵌入式软件工程师绕不过去的坎, makefile 是在Linux系统中绕不过去的坎. 花了几天时间初步学习和了解了makefile 的作用以及功能,并且制作了一个通用型的makefi ...

  6. 千与千寻主题曲beep函数版

    在出代码之前,我们向来了解一下Beep函数. 例: Beep(,); 这个表示575Hz响100ms. 下面给出代码: #include <bits/stdc++.h> #include ...

  7. Mybatis:CRUD操作

    提示: Mapper配置文件的命名空间为对应接口包名+接口名字,这个经常会忘记和搞错的!! select标签 在接口中编写三个查询方法 //获取全部用户List<User> selectU ...

  8. 线性模型之逻辑回归(LR)(原理、公式推导、模型对比、常见面试点)

    参考资料(要是对于本文的理解不够透彻,必须将以下博客认知阅读,方可全面了解LR): (1).https://zhuanlan.zhihu.com/p/74874291 (2).逻辑回归与交叉熵 (3) ...

  9. jquery判断手指滑动方向

    jquery判断手指滑动方向 <pre> /*判断哪个滑动方向还是自己改下 要么上下 要么左右*/ var startX; var startY; $(".shanghua&qu ...

  10. html5 textarea 写入换行的方法

    html5 textarea 写入换行的方法<pre> <textarea id="fwe" class="selmiao" cols=&qu ...