title: GithubPage和Hexo搭建个人博客网站 date: 2020-02-09 12:24:45 tags: - github - Hexo categories: GithubPage
前言
github支持githubPage静态界面来搭建我们的个人博客,自己配置。
创建github仓库
创建http://username.github.io仓库,同时setting中勾选githubpage
![8f7b62ae4822cb9388dca3a5cf9ef6b2.png](https://i-blog.csdnimg.cn/blog_migrate/60193a7fe839ff595f22f5a05cacf90e.jpeg)
创建好后我们可以通过zhanghanlun.github.io来访问该博客
利用hexo配置博客
GithubPage支持Jelly和Hexo来搭建静态界面,本教程使用Hexo来搭建博客。
初始化hexo
本节截取自hexo的官方文档
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
生成和运行静态网页
通过如下命令来生成静态网页
$ hexo generate
通过如下命令来在本地运行静态网页
$ hexo deploy
第一次运行该命令,要先安装hexo-server
$ npm install hexo-server --save
安装完成后,输入以下命令以启动服务器,您的网站会在 http://localhost:4000 下启动
部署到Github
安装hexo部署插件hexo-deploy-git
$ npm install hexo-deployer-git --save
同时修改博客配置文件_config.yml
deploy:
type: git # 部署方式git
repo: git@github.com:zhanghanlun/zhanghanlun.github.io.git #远端仓库地址
branch: master # 分支
最后通过如下命令部署到github
$ hexo deploy
配置next主题
添加next主题
本节参考next主题官方文档 添加next主题
$ cd hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
修改博客配置文件_config.yml,修改主题为next
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
修改next主题语言
在next主题最新版本中依赖博客的配置文件,而不是主题本身的配置文件的语言
title: 张函仑的技术博客
subtitle: ''
description: ''
keywords:
author: 张函仑
language: zh-CN
timezone: ''
配置标签和分类
通过修改主题配置文件_config.yml来添加菜单
menu:
home: / || home # 主页
about: /about/ || user # 关于页
tags: /tags/ || tags # 标签
categories: /categories/ || th # 分类
archives: /archives/ || archive # 归档
运行命令
$ hexo new page categories
$ hexo new page tags
$ hexo new page about
添加文章评论和文章阅读次数
该功能通过valine来实现,而valine是通过leancloud来实现单点 首先去leanclode官网l注册账号然后在控制台创建一个免费的应用,找到appId和appKey。
![629d8d4077bd1aaf45118f5aa086a4a3.png](https://i-blog.csdnimg.cn/blog_migrate/48f949835e4f43f0422bce7bfb7d2093.jpeg)
修改主题配置文件_config.yml
valine:
enable: true
appid: *** # Your leancloud application appid
appkey: *** # Your leancloud application appkey
notify: true # Mail notifier
verify: false # Verification code
placeholder: Just go go # Comment box placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: zh-cn # Language, available values: en, zh-cn
visitor: true # 文章阅读数量统计
comment_count: true # If false, comment count will only be displayed in post page, not in home page
recordIP: false # Whether to record the commenter IP
serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
#post_meta_order: 0
添加本地搜索
安装 hexo-generator-search
$ npm install hexo-generator-search --save
然后在hexo配置文件中_config.yml修改
search:
path: search.xml
field: post
format: html
limit: 10000
添加打赏功能
修改主题配置_config.yml,并添加收款图片到theme/next/source/image文件夹下
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true
animation: false
comment: 原创技术分享,您的支持将鼓励我继续创作。
reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg
添加sitemap到谷歌和百度搜索
安装sitemap生成插件
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-baidu-sitemap --save
添加hexo配置_config.yml
Plugins:
- hexo-generator-baidu-sitemap
- hexo-generator-sitemap
baidusitemap:
path: baidusitemap.xml
sitemap:
path: sitemap.xml
同时修改hexo的url配置为你的博客域名
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://zhanghanlun.github.io
然后在谷歌搜索网站进行配置添加
![0d2901cdcbd8d2e7fcbb671ff303aafd.png](https://i-blog.csdnimg.cn/blog_migrate/509e793eaaa6877d698d6e39f9af926a.jpeg)
![b2e22f351881e04f2e213e6bc3c78cad.png](https://i-blog.csdnimg.cn/blog_migrate/c2882a3b3474a48f02d1fb90e42d1907.jpeg)
将该文件保存到source目录下 同理百度搜索资源平台提交也是这么做 踩坑注意需要修改hexo配置文件,将该html在生成过程中保留原有格式不变
skip_render:
- baidu_verify_.html
- google.html