[关闭]
@llplmlyd 2018-08-13T04:25:00.000000Z 字数 4421 阅读 1723

Github Pages +Hexo搭建个人博客

练习 Git

环境准备（以本教程为例）

注意：在Windows下安装完成后，git如果是在之前就安装好的，需重启才能使用npm命令
Git安装选项解释见：
https://blog.csdn.net/ainuser/article/details/77609180

环境部署-在GitHub上创建Github Pages项目

1 注册Github

2 创建新仓库

点击“New”新建 “Repository”，这里一定要命名为“username.github.io”，然后选择Public，公开是免费的。
Github会识别并自动将该仓库设为Github Pages。用户主页是唯一的，填其他名称只会被当成普通项目。

3 关联Git与GitHub

1）准备SSH Key：

  1. ls -al ~/.ssh  #根目录下检查本地是否本身存在SSH key
  2. rm -rf ~/.ssh #若原本存在，则清除本地原有的SSH key或者在后面生成SSH key的时候对原ssh进行覆盖操作
  3. git config --global user.name "<your_name>"  #设置Git登录的用户名，与github账户无关，做好记录
  4. git config --global user.email "<your_email>"  #设置Git登录的邮箱，与github账户无关，做好记录
  5. ssh-keygen -t ras -C "<your_github_email>"    #生成SSHkey，按照提示Enter，可不设置密码，设置密码后每当执行push操作时都需要输入密码，此处不设置，直接生成即可
  6. ls -al ~/.ssh  #查看生成的SSH key文件：id_rsa、id_rsa.pub
  7. cat ~/.ssh/id_rsa.pub #查看SSH key

2）添加SSH key：
Personal Setting > SSH and GPG keys>New SSH key
Title：随意即可
Key：按照提示复制，将准备好的SSH key全部复制粘贴过来

3）SSH key测试连接

  1. $ ssh git@github.com #根目录下运行命令即可，不需要修改该命令的参数
  2.  #如果设置了密码会出现这一行：Enter passphrase for key '/c/Users/llp/.ssh/id_rsa':
  3. PTY allocation request failed on channel 0
  4. Hi llplmlyd! You've successfully authenticated, but GitHub does not provide shell access.
  5. Connection to github.com closed.#这里表示已经连接成功

Hexo建站

1 Hexo安装

  1. $ npm install -g hexo-cli  #根目录下运行即可

2 本地新建博客站点文件夹

3 初始化建站

  1. cd <your_blog_name> #进入站点文件夹，tips：可以直接在站点文件夹下右键Gitbash即由git进入了文件夹内
  2. hexo init #在当前目录下初始化，注意一定要是空文件夹，否则会报错，无法初始化
  3. npm install #开始初始化安装hexo各配置文件

初始化结果如下：

  1. .
  2. ├── _config.yml
  3. ├── package.json
  4. ├── scaffolds
  5. ├── source
  6. |   ├── _drafts
  7. |   └── _posts
  8. └── themes

有时候会有一些其他的文件如：package-lock.json等

4 配置_config.yml

配置文件修改可以借助编辑器进行修改，主要修改以下几个字段

#Site

  1.  #Site
  2. title #博客标题
  3. subtitle #博客副标题
  4. description #博客描述
  5. author #作者
  6. language 按照所选择主题进行设置，此处先默认处理

#Directory

  1. #Directory
  2. #如果是站点即博客文件夹，则采取默认配置即可；如果是其他站点下的子文件夹则须修改
  3. #参考https://hexo.io/zh-cn/docs/configuration

## Themes

  1. ## Themes: https://hexo.io/themes/
  2. theme: next #主题根据自己使用的主题所在的文件夹名字修改

# Deployment

  1. # Deployment 部署Hexo与Github关联推送
  2. ## Docs: https://hexo.io/docs/deployment.html
  3. deploy:
  4.     type: git
  5.     repo: ssh://git@github.com/[githubname]/[库名].github.io
  6.     branch: master

# Search

  1. # 手动添加本地搜索功能字段
  2. # Search
  3. # Local Search: http://theme-next.iissnan.com
  4. search:
  5.     path: search.xml
  6.     field: post
  7.     format: html
  8.     limit: 10000

5 主题选择与配置

1）在hexo上下载解压喜欢的主题到本地
https://hexo.io/themes/
2）复制该主题文件夹到：站点文件夹/themes
3）修改 _config.yml 中的## Themes
4）验证是否启用

  1. $ hexo new [layout] <title> #在站点根目录下gitbash输入，layout可不填，默认为post
  2. $ hexo s --debug
  3. INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
  4. #选中地址右键实时预览

5）主题配置文件修改
http://theme-next.iissnan.com/
① 主题 Scheme设定 > 设置 语言(站点配置文件中修改)
② Menu 菜单设置

  1. # Value before `||` delimeter is the target link.
  2. # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.
  3. menu:
  4. home: / || home #首页
  5. about: /about/ || user  #关于
  6. tags: /tags/ || tags  #标签
  7. categories: /categories/ || th  #目录
  8. archives: /archives/ || archive #归档

③ Sidebar 侧栏设置：默认
④ Avatar 头像设置

  1. # 将使用的头像图片调整成正方形并置入
  2. #[站点文件夹]\themes\next\source\images
  3. # Sidebar Avatar
  4. # in theme directory(source/images): /images/avatar.gif
  5. # in site directory(source/uploads): /uploads/avatar.gif
  6. avatar: /images/your_avatar.jpg #文件名与后缀需完全对应

⑤ Social Links 添加社交连接

  1. # Social Links.
  2. social:
  3.      Google: https://plus.google.com/yourname || google

⑥ links 友情链接

  1. links:
  2.     中文: 网址链接

⑦添加评论功能

  1. # Valine.
  2. # You can get your appid and appkey from https://leancloud.cn
  3. # more info please open https://valine.js.org
  4. valine:
  5.     enable: true
  6.     appid: your appid
  7.     appkey: appkey

⑧添加阅读量统计、评论量统计
本文采用leancloud第三方插件
http://theme-next.iissnan.com/getting-started.html#leanclound-page-views
注册leancloud获得AppleID 和AppleKey
并在leancloud上添加两类class：Counter和Comments
https://leancloud.cn/
在主题配置文件中设置AppleID 和AppleKey，

⑨ 添加 访问量统计

  1. # Get more information on http://ibruce.info/2015/04/04/busuanzi/
  2. busuanzi_count:
  3.     # count values only if the other configs are false
  4.     enable: true
  5.     # custom uv span for the whole site
  6.     site_uv: true
  7.     site_uv_header: <i class="fa fa-user"> 访客数</i>
  8.     site_uv_footer: 人次
  9.     # custom pv span for the whole site
  10.     site_pv: true
  11.     site_pv_header: <i class="fa fa-eye"> 总访问量</i>
  12.     site_pv_footer: 次
  13.     # custom pv span for one page only
  14.     page_pv: true
  15.     page_pv_header: <i class="fa fa-file-o"> 总阅读量</i>
  16.     page_pv_footer: 次

⑩ 添加标签
http://theme-next.iissnan.com/theme-settings.html#tags-page

6）新建目录
博客中的关于、标签和分类等栏目无文件夹，需要个人手动创建

  1. hexo new page categories [栏目英文名称]

注意：要添加标签和自己新建目录之后侧栏才会显示出该数量

6 生成与部署到Github上

在站点目录下右键gitbash

  1. $ hexo s --debug #可在各项详细配置完成后先进行测试
  2. INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.
  3. $ hexo clean  #可以清除缓存，再进行测试
  4. $ hexo generate #简写为hexo g，生成静态文件，文件位于public文件夹中
  5. $ hexo deploy    #简写为hexo d，部署网站到Github上，
  6. #可以生成与部署联用 hexo g -d 表示生成后立刻部署到github上

注意：这里不需要使用到Git 与remote的同步与push命令之类的，请不要强行push站点文件夹，使用hexo d只会将public文件夹与仓库同步，配置文件仍保留在本地。

参考链接：
https://hexo.io/zh-cn/docs/
http://theme-next.iissnan.com/
http://theme-next.iissnan.com/third-party-services.html

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注