hexo
title: hexo
categories: 博客
tags:javascript
- hexo
- github
summary: hexo博客搭建過程，git、hexo、node的安裝，hexo博客的初始化，整合GitHub page
typora-root-url: hexo
abbrlink: ab21860c
date: 2019-01-23 09:07:30css
安裝Node.js
安裝Git
安裝Hexo
//全局安裝
$ npm install -g hexo-cli
存放位置java
C:\Users\libingshen\AppData\Roaming\npm\node_modules
驗證安裝是否成功node
C:\Users\libingshen>node --version
v10.15.0
C:\Users\libingshen>npm --version
6.4.1
C:\Users\libingshen>git --version
git version 2.16.2.windows.1
C:\Users\libingshen>hexo --version
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.15.0
v8: 6.8.275.32-node.45
uv: 1.23.2
zlib: 1.2.11
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 3
openssl: 1.1.0j
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e
Hexo博客初始化
$ cd D:\mytest\myhexo
$ hexo init
//安裝依賴
$ npm install
//或者hexo generate生成靜態頁
$ hexo g
//或者hexo server，啓動服務器，能夠在http://localhost:4000/ 查看
$ hexo s
Hexo博客部署到GitHub
本地客戶端與GitHub創建受權鏈接生成公私鑰
ssh-keygen -t rsa -C "782125244@qq.com"
公私鑰存放位置nginx
C:\Users\libingshen\.ssh
將公鑰內容上傳到GitHubgit
GitHub建立倉庫做爲hexo博客的站點
hexo配置GitHub鏈接
安裝 hexo-deployer-gitgithub
$ npm install hexo-deployer-git --save
修改配置D:mytestmyhexo_config.ymlweb
#配置GitHub博客站址訪問路徑
# URL這裏要是沒有配置，GitHub樣式顯示不出來
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://shenlibing.github.io/myhexo/
root: /myhexo
permalink: :year/:month/:day/:title/
permalink_defaults:
#博客推送到GitHub地址配置
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: https://github.com/shenlibing/myhexo.git
branch: [master]
配置GitHub Pages
備份博客源文件
hexo部署到GitHub只上傳.deploy_git文件夾的內容，並不會上傳_posts文件夾下的博客源文件
D:\mytest\myhexo\.deploy_git
D:\mytest\myhexo\source\_posts
解決：
將_posts文件夾做爲git倉庫，上傳到GitHub，使得其做爲另外一個分支
建立並切換到新分支
libingshen@DESKTOP-7V287SK MINGW64 /d/mytest/myhexo/source/_posts (master)
$ git checkout -b src
Switched to a new branch 'src'
將新分支推送到GitHub
git add .
git commit -m 'add_v1:-新增hello-world筆記初始化'
git push origin src
將博客源文件分支設爲推送的默認分支，git push推送直接推送到src分支
補充：
刪除本地分支
$ git branch -d src
刪除遠程分支
$ git push origin -d src
切換分支
$ git checkout master
查看提交日誌
$ git log --oneline
拓展版本一
更換hexo主題
下載
https://github.com/theme-next/hexo-theme-next
解壓放到D:mytestmyhexothemes
修改D:\mytest\myhexo\_config.yml配置文件
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next-master
修改站點語言
編輯D:\mytest\myhexo\_config.yml文件
# Site
title: 小兵兵
subtitle:
description:
keywords:
author: shenlibing
language: zh-CN
timezone:
開啓搜索、字數統計和閱讀時長統計
安裝依賴hexo-symbols-count-time、hexo-generator-searchdb，安裝依賴不成功時先刪除D:mytestmyhexonode_modules文件夾，從新安裝依賴
npm install hexo-symbols-count-time --save
npm install hexo-generator-searchdb --save
配置主題樣式文件
進入D:\mytest\myhexo\themes\hexo-theme-next-master\文件夾，編輯_config.yml文件
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true
item_text_post: true
item_text_total: false
awl: 4
wpm: 275
配置站點文件
編輯D:\mytest\myhexo\_config.yml文件
#閱讀時長和本文字數
symbols_count_time:
symbols: true
time: true
total_symbols: true
total_time: true
#搜索功能
search:
path: search.xml
field: post
format: html
limit: 10000
添加分類和標籤
$ hexo new page categories
$ hexo new page tags
編輯D:mytestmyhexosourcecategoriesindex.md
---
title: categories
date: 2019-01-22 16:37:58
type: "categories" #這部分是新添加的
---
編輯D:mytestmyhexosourcetagsindex.md
---
title: tags
date: 2019-01-22 16:38:40
type: "tags" #新添加的內容
---
修改菜單，添加categories和tags到menu中
menu:
home: / || home
#about: /about/ || user
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive
#schedule: /schedule/ || calendar
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat
新增文章，添加categories、tags
---
title: hexo博客搭建
date: 2019-01-23 09:07:30
categories: 平常記錄
tags:
- hexo
- git
- github
- node
- markdown
---
更換頁面菜單佈局位置
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
配置文章瀏覽量
註冊
建立應用
建立Class
配置web安全域名
獲取app_id、app_key
編輯D:\mytest\myhexo\themes\hexo-theme-next-master\_config.yml配置文件，填app_id、
app_key;security設置爲false
# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
enable: true
app_id: BedsOkBLOBR4nM4W52xTcBhb-gzGzoHsz #<app_id>
app_key: EEaRfb6dCMaS38laDCkSYhM9 #<app_key>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: false
betterPerformance: false
插入圖片
插入本地圖片
安裝依賴
npm install hexo-asset-image --save
編輯D:\mytest\myhexo\_config.yml配置文件
post_asset_folder: true
命令hexo new post test來生成博文時，/source/_post文件夾中除了test.md外，還有一個同名test文件夾
typora插入本地圖片
typora設置
文件--偏好設置--圖片插入
編輯--圖片工具--設置圖片根目錄
typora-root-url: hexo/
製做動態圖軟件
圖片壓縮軟件
設置動態背景
進入D:mytestmyhexothemeshexo-theme-next-masterlayout文件夾，編輯_layout.swig文件，在</body>以前添加
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
添加Fork me on GitHub
進入D:mytestmyhexothemeshexo-theme-next-masterlayout文件夾，編輯_layout.swig文件，在<div class="headband"></div>下面添加選擇的圖標樣式代碼
<a href="https://github.com/shenlibing/" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
添加友情連接
方式一
進入D:\mytest\myhexo\themes\hexo-theme-next-master\layout\_partials文件夾，在footer.swig文件末尾追加
<div>友情連接： <a class="theme-link" href="http://collect.w3ctrain.com/"> 前端收藏夾 </a><span> </span> <a class="theme-link" href="http://www.alloyteam.com/nav/"> Web前端導航 </a><span> </span> <a class="theme-link" href="http://www.runoob.com/"> 菜鳥教程 </a><span> </span> <a class="theme-link" href="https://mccxj.github.io/"> 小毛的胡思亂想 </a><span> </span> </div>
方式二
進入D:\mytest\myhexo\themes\hexo-theme-next-master文件夾，編輯_config.yml文件
# Blog rolls
links_icon: link
links_title: Links
links_layout: block
#links_layout: inline
#links:
#Title: http://example.com
links:
美團技術團隊: https://tech.meituan.com/
百度FEX: http://fex.baidu.com/
淘寶FED: http://taobaofed.org/
設置閱讀全文
進入D:\mytest\myhexo\themes\hexo-theme-next-master文件夾，編輯_config.yml文件
# Automatically Excerpt. Not recommend.
# Use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: true
length: 150
添加評論
選擇gitalk
須要 GitHub Application，若是沒有 點擊這裏申請，Authorization callback URL 填寫當前使用插件頁面的域名。
獲取client_id和client_secret
進入D:\mytest\myhexo文件夾，編輯_config.yml文件
- clientID
StringRequired. GitHub Application Client ID.
- clientSecret
StringRequired. GitHub Application Client Secret.
- repo
StringRequired. GitHub repository.
- owner
StringRequired. GitHub repository owner. Can be personal user or organization.
- admin
ArrayRequired. GitHub repository owner and collaborators. (Users who having write access to this repository)
# Gitalk # Demo: https://gitalk.github.io # Reference: https://asdfv1929.github.io/2018/01/20/gitalk/, https://liujunzhou.top/2018/8/10/gitalk-error/ gitalk: enable: true github_id: shenlibing # Github repo owner repo: myhexo # Repository name to store issues. client_id: # Github Application Client ID client_secret: # Github Application Client Secret admin_user: shenlibing # GitHub repo owner and collaborators, only these guys can initialize github issues distraction_free_mode: true # Facebook-like distraction free mode
拓展版本二
開啓打賞
進入D:\mytest\myhexo文件夾，編輯_config.yml文件
# Reward # If true, reward would be displayed in every article by default. # And you can show or hide one article specially through add page variable `reward: true/false`. reward: enable: true #comment: Donate comment here wechatpay: /images/wechat.jpg alipay: /images/alipay.jpg #bitcoin: /images/bitcoin.jpg
部署到雲、使用圖牀、優化URL
部署到雲服務器
拷貝本機的公鑰id_rsa.pub內容到雲服務器authorized_keys上
進入D:\mytest\myhexo文件夾，編輯_config.yml文件
# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' # url: https://shenlibing.github.io/ url: http://bingbing.tech/ root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git # repo: https://github.com/shenlibing/shenlibing.github.io.git #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io repo: root@192.168.1.101:/root/project/hexo.git #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io # repo: ssh://root@192.168.1.101:22/root/project/hexo.git branch: [master] #published
服務器建立裸倉庫
[root@izm5eac6bnsz8uq175jkvez project]# git init --bare hexo.git
配置鉤子
[root@izm5eac6bnsz8uq175jkvez hooks]# pwd
/root/project/hexo.git/hooks
[root@izm5eac6bnsz8uq175jkvez hooks]# chmod 744 post-receive
[root@izm5eac6bnsz8uq175jkvez hooks]# ll
total 44
-rwxr-xr-x 1 root root 452 Aug 13 16:59 applypatch-msg.sample
-rwxr-xr-x 1 root root 896 Aug 13 16:59 commit-msg.sample
-rwxr--r-- 1 root root 357 Aug 14 17:50 post-receive
-rwxr-xr-x 1 root root 189 Aug 13 16:59 post-update.sample
-rwxr-xr-x 1 root root 398 Aug 13 16:59 pre-applypatch.sample
-rwxr-xr-x 1 root root 1704 Aug 13 16:59 pre-commit.sample
-rwxr-xr-x 1 root root 1239 Aug 13 16:59 prepare-commit-msg.sample
-rw-r--r-- 1 root root 1348 Aug 13 16:59 pre-push.sample
-rwxr-xr-x 1 root root 4951 Aug 13 16:59 pre-rebase.sample
-rwxr-xr-x 1 root root 3611 Aug 13 16:59 update.sample
[root@izm5eac6bnsz8uq175jkvez hooks]# cat post-receive
#!/bin/bash -l
#GIT_REPO=<到hexo.git的目錄>
#TMP_GIT_CLONE=<到臨時blog的目錄>
#PUBLIC_WWW=<到blog服務的目錄/public/blog>
GIT_REPO=/root/project/hexo.git
TMP_GIT_CLONE=/tmp/blog
PUBLIC_WWW=/opt/module/website/blog
rm -rf ${TMP_GIT_CLONE}
git clone ${GIT_REPO} ${TMP_GIT_CLONE}
rm -rf ${PUBLIC_WWW}/*
cp -rf ${TMP_GIT_CLONE}/* ${PUBLIC_WWW}
[root@izm5eac6bnsz8uq175jkvez hooks]#
修改Nginx配置文件
[root@izm5eac6bnsz8uq175jkvez blog]# whereis nginx
nginx: /usr/sbin/nginx /usr/lib64/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz /usr/share/man/man3/nginx.3pm.gz
[root@izm5eac6bnsz8uq175jkvez blog]# cd /etc/nginx/
[root@izm5eac6bnsz8uq175jkvez nginx]# ll
total 72
drwxr-xr-x 2 root root 4096 May 10 16:14 conf.d
drwxr-xr-x 2 root root 4096 May 10 16:14 default.d
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf
-rw-r--r-- 1 root root 1077 May 10 16:10 fastcgi.conf.default
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params
-rw-r--r-- 1 root root 1007 May 10 16:10 fastcgi_params.default
-rw-r--r-- 1 root root 2837 May 10 16:10 koi-utf
-rw-r--r-- 1 root root 2223 May 10 16:10 koi-win
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types
-rw-r--r-- 1 root root 3957 May 10 16:10 mime.types.default
-rw-r--r-- 1 root root 3051 Aug 15 20:29 nginx.conf
-rw-r--r-- 1 root root 2467 Aug 13 11:05 nginx.conf.bak
-rw-r--r-- 1 root root 2656 May 10 16:10 nginx.conf.default
-rw-r--r-- 1 root root 636 May 10 16:10 scgi_params
-rw-r--r-- 1 root root 636 May 10 16:10 scgi_params.default
-rw-r--r-- 1 root root 664 May 10 16:10 uwsgi_params
-rw-r--r-- 1 root root 664 May 10 16:10 uwsgi_params.default
-rw-r--r-- 1 root root 3610 May 10 16:10 win-utf
[root@izm5eac6bnsz8uq175jkvez nginx]# cat nginx.conf
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
server {
listen 8000 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
server {
listen 80; #端口
# server_name bingbing.tech; #域名或IP
root /opt/module/website/blog; #站點根目錄
charset utf-8; #文件編碼
index index.html index.htm; #首頁
error_page 404 /404.html; #404頁面
error_page 500 502 503 504 /50x.html; #服務端錯誤頁面
#url訪問匹配路徑，能夠添加多個
location / {
index index.html index.htm;
root /opt/module/website/blog; #這裏能夠是絕對路徑或者相對路徑，基於站點根目錄
}
}
# Settings for a TLS enabled server.
#
# server {
# listen 443 ssl http2 default_server;
# listen [::]:443 ssl http2 default_server;
# server_name _;
# root /usr/share/nginx/html;
#
# ssl_certificate "/etc/pki/nginx/server.crt";
# ssl_certificate_key "/etc/pki/nginx/private/server.key";
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 10m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
#
# # Load configuration files for the default server block.
# include /etc/nginx/default.d/*.conf;
#
# location / {
# }
#
# error_page 404 /404.html;
# location = /40x.html {
# }
#
# error_page 500 502 503 504 /50x.html;
# location = /50x.html {
# }
# }
}
使用GitHub圖牀
建立個存放圖片的倉庫blogphoto
替換typora生成的圖片路徑
替換腳本
使用七牛雲圖牀
新建存儲空間
綁定域名
域名添加CANME記錄
上傳圖片、外鏈訪問
替換腳本
優化URL
安裝依賴
npm install hexo-abbrlink --save
編輯D:\mytest\myhexo\_config.yml配置文件
# URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' # url: https://shenlibing.github.io/ url: http://bingbing.tech/ root: / # permalink: :year/:month/:day/:title/ # permalink_defaults: #插件hexo-abbrlink # permalink: :title/ permalink: archives/:abbrlink.html abbrlink: alg: crc32 # 算法：crc16(default) and crc32 rep: hex # 進制：dec(default) and hex
常見錯誤
錯誤一：
故障現象：xml轉移錯誤，致使搜索不出結果
故障緣由：
解決：
參考：
【持續更新】Github Pages + Hexo 博客搭建，Next主題個性化修改
相關文章
- 1. hexo
- 2. Hexo
- 3. Hexo 主題：hexo-easy-theme
- 4. 搭建Hexo博客在git上執行 hexo d /hexo g 報錯:ERROR Local hexo not found in D:\hexo 解決
- 5. hexo+gitee
- 6. hexo search
- 7. deploy hexo
- 8. Hexo寫博客和Hexo Admin管理
- 9. 【Hexo】Hexo個人博客綁定域名
- 10. 安裝Hexo時npm install hexo -g 出錯
- 更多相關文章...
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
