Giskard

Hexo+Github建站记录与踩坑指南

2018-01-25

偶然在wordpress论坛里看到别人在讨论HEXO,抱着试一试的态度部署了一下,并且第一次接触到了markdown语法,感觉还挺好玩的,但愿这个博客我会一直做下去

为什么要用HEXO

  • 免费。可以托管到github,相当于免费提供给你一个主机空间。
  • 快捷。之前使用过wordpress或其他建站方法,看似简单,实则需要安装各种乱七八糟的插件,初学者很容易被搞晕。而且总感觉wordpress过于臃肿,HEXO则以打开速度快著称。
  • 支持markdown。写作更清晰便捷。
  • 本地部署。数据保留在本地,需要时上传,更安全。

环境部署

  • 安装git

  • 安装node.js

  • 注册github,并建立一个仓库

    注意:该仓库名称格式必须为
    你的用户名.github.io

    建库时勾上生成readme文件

建立秘钥

如果你已经安装好了git,在桌面右键打开Git Bash Here
输入

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路回车,最终在C:\Users\XXX\.ssh文件夹内会有两个文件:id_rsa和id_rsa.pub
打开id_rsa.pub,复制里面所有内容。打开SSH keys,新建一个SSH key,粘贴进去刚才的内容,标题自拟。

安装HEXO

在D盘下新建blog文件夹
在桌面右键打开Git Bash Here

npm install -g cnpm --registry=https://registry.npm.taobao.org
#将国外的npm源改为国内的cnmp源
cnpm install -g hexo-cli
hexo init D:/blog
cd D:/blog
cnpm install 

等待3-5分钟时间,HEXO已在本地部署成功

配置博客

  • 打开D:\blog下的_config.yml文件
    将其修改为自己的配置

    title: Giskard
    subtitle: Giskard
    description: 
    author: Demerzelxd
    language: zh-CN
    timezone: Asia/Shanghai
    #每一项的冒号后都要留空格
    
  • 域名配置
    顺着前面的配置往下走,有个url项,这就是域名配置。自己有域名的同学可以绑定自己的域名
    url: https://getschwifty.cn
    自己没有域名的同学只能写
    url: https://demerzelxd.github.io
    在有域名的情况下,可以到域名解析处做如下配置
    域名解析


    一定要使用图中的记录值,以192开头的旧记录值已经不再支持强制启用https
  • 进入自己的仓库点settings
    settings
    下拉填写自己的域名
    域名强制https

    为防止失效,在D:\blog\source下新建CNAME文件
    在里面填写getschwifty.cn,不要加https://

  • deploy配置
    找到deploy部分,然后按照如下格式填写

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

    一定要使用上面代码的deploy方式,旧的https方式有错误

上传部署至服务器

在桌面右键打开Git Bash Here

cd D:/blog
cnpm install hexo-deployer-git --save
hexo d 

完成配置

发布文章

cd D:/blog
hexo new "你要写的文章题目" 

这时文章储存在D:\blog\source_posts
打开并填入要发表的内容
回到git输入
hexo clean ; hexo g ; hexo d
再访问首页文章就出现了

安装prism插件可以代码高亮,我使用的是xonokai主题

配置vexo主题

cd D:/blog
git clone https://github.com/yanm1ng/hexo-theme-vexo.git themes/vexo
cp -R themes/vexo/_source/* source/

之后修改D:\blog\themes\vexo的_config.yml配置
修改D:\blog的_config.yml
theme: vexo
回到git

cd D:/blog
hexo s
#建立本地网页,浏览器输入localhost://4000即可进入
hexo c ; hexo g ; hexo d
#清理缓存并上传至服务器

发布新文章时

---
title: "Hello World"
date: 2016-06-10 23:00
banner: your-banner-link.jpg
tags: 
    - HEXO
    - 网站
---

更新主题

cd themes/vexo
git pull

Gitment配置

https://github.com/settings/applications/new 中,Application name里填写你要把评论内容存放的库repo名,所以事先建好这个库,url均填写你的网址

由于原作者的gitment.js请求了一个服务接口,由于这个服务接口是作者自己搭建的,已经停止了。
所以可能会产生[object ProgressEvent]错误

所以要将直接把这个文件 https://imsun.github.io/gitment/dist/gitment.browser.js 替换为 https://www.wenjunjiang.win/js/gitment.js 就可以了

对于Vexo主题,也就是把D:\Blog\themes\vexo\source\js下的gitment.js替换为https://www.wenjunjiang.win/js/gitment.js 中的js文件

对于Vexo主题的css错误,将D:\Blog\themes\vexo\layout_partial中的head.ejs改为

D:\Blog\themes\vexo\layout\_partial

Vexo主题_config全部配置

author: Giskard # 作者
description: Wubba Lubba Dub Dub
keyword: hexo-theme, vuejs
favicon: https://raw.githubusercontent.com/demerzelxd/Pic/master/favicon.png

excerpt_link: Read more

menu:
 Home: /
 Tags: /tags/
 Archives: /archives/
 Projects: /project/
 About: /about/

# highlight
highlight:
  xonokai

# catalog
catalog: true

# donate
donate: false

# qrcode
qrcode: false

# comment
# you can set gitment, uyan or disqus

comment: gitment

# gitment config
gitment_owner: demerzelxd
gitment_repo: Blog
gitment_oauth_id: 035ea2f31d1eda1616a5
gitment_oauth_secret: 6c6709e53b43b587b1b90a755ce027f94398590c

# uyan config
# if you want to use uyan as your blog comment, plz remove/comment out gitment config
baidu_id: 

# disqus config
disqus_shortname: 

about: 
  banner: https://raw.githubusercontent.com/demerzelxd/Pic/master/about.jpg
  avatar: "https://raw.githubusercontent.com/demerzelxd/Pic/master/favicon.png"
  description: Wubba Lubba Dub Dub
  weibo_username: demerzelxd
  twitter_username: Giskard33
  github_username: demerzelxd
  zhihu_username: lixinda
  douban_username: getschwifty
  linkedin_username:

# MathJax Support
mathjax:
  enable: true
  per_page: false
  cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML

Hexo-Admin配置

通过此插件可以在网页上进行markdown文件的编写预览和网站内容的deploy

安装及打开

cnpm install --save hexo-admin
hexo server -d
open http://localhost:4000/admin/

进入本地网址后,点settings→Setup authentification here,编写用户名密码,将生成的模板粘贴进根目录的_config文件

类似于

# hexo-admin authentification
admin:
  username: giskard
  password_hash: $2a$10$zMobgcCB0Ofv1YZgqhfJNOEcYLI7AiBqoiG7FyYYM8A9cmvzaVVaO
  secret: my super secret phrase
  deployCommand: 'hexo-deploy.bat'

在根目录新建hexo-deploy.bat

写入

hexo c;hexo g;hexo d

大功告成,此时点本地网页的Deploy即可一键同步更新

使用PicGo将Github作为默认图床

新建仓库

{
  "repo": "", // 仓库名,格式是username/reponame
  "token": "", // github token
  "path": "", // 自定义存储路径,比如img/
  "customUrl": "", // 自定义域名,注意要加http://或者https://
  "branch": "" // 分支名,默认是master
}

访问https://github.com/settings/tokens 生成token

把repo的勾打上即可。然后翻到页面最底部,点击Generate token的绿色按钮生成token。

下载Pic,将上面填好的输进去即可

根目录_config全部配置

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Giskard
subtitle: Giskard
description: Wubba Lubba Dub Dub
keywords:
author: Giskard
language:
- zh-CN
- en
- zh-HK
- zh-TW
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://getschwifty.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: false
#  line_number: true
#  auto_detect: true
#  tab_replace:

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'xonokai'
  line_number: true    # default false
  custom_css:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 15
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 15
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: vexo

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:demerzelxd/demerzelxd.github.io.git
  branch: master 

# hexo-admin authentification
admin:
  username: giskard
  password_hash: $2a$10$zMobgcCB0Ofv1YZgqhfJNOEcYLI7AiBqoiG7FyYYM8A9cmvzaVVaO
  secret: my super secret phrase
  deployCommand: 'hexo-deploy.bat'
  # expire: 60*1