折腾了一天,终于搞定了自己的个人博客网站。
其实也不是说建立多难,只是想要好看、好用啥的。
github 建立个人博客仓库
仓库名: 用户名.github.io
例: lansm.github.io
安装git
- 安装成功后,将Git与GitHub帐号绑定设置user.name和user.email配置信息
- 生成ssh密钥文件,直接三个回车即可,默认不需要设置密码
- 找到生成的.ssh的文件夹中的id_rsa.pub密钥,将内容全部复制,打开GitHub_Settings_keys 页面,新建new SSH Key
- 在Git Bash中检测GitHub公钥设置是否成功
1 | git config --global user.name "你的GitHub用户名" |
安装Node.js
检测
Node.js
是否安装成功node -v
检测npm
是否安装成功npm -v
安装Hexo
建立文件夹存放Hexo
框架与以后你自己发布的网页
通过命令行进入文件夹(或者文件夹中shift+右键
)
安装Hexo
1 | npm install -g hexo-cli |
初始化博客
1 | hexo init blog |
为了检测我们的网站雏形,分别按顺序输入以下三条命令:
1 | hexo new test_my_site |
新建一篇博客文章+生成网页+在本地预览
默认本地服务地址 : localhost:4000
将我们的Hexo
与GitHub
关联起来,打开站点的配置文件_config.yml
(自己建立的根目录下),翻到最后修改为:
1 | deploy: |
上面是给hexo d
做相应配置,让hexo
知道你要把blog部署在哪里
安装Git部署插件
1 | npm install hexo-deployer-git --save |
1 | hexo clean |
hexo d
就是部署网站命令,d是deploy的缩写。
完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 用户名.github.io
例: lansm.github.io
到这里其实已经完成博客的框架搭建,可以自行探索了
但是为了更简单+更美观: 选择HEXO主题安装
安装配置主题
以本站主题为例:
1 | git clone https://github.com/Sariay/hexo-theme-Annie.git |
将站点目录下的_config.yml
文件中的theme
字段修改为Annie
。
确保themes
目录下存在名为Annie
的文件夹(或hexo-theme-Annie
)
其它说明
- star主题库查看实现功能~Annie主题github
- 主题原作者Blog~Annie主题使用说明详情
- [知乎]Github+Hexo 搭建个人博客(包括域名绑定)
备份hexo防止换电脑掉数据之类(有问题) 详情请看 新生:Butterfly主题更替- SEO和站点加速
- Hexo提交百度谷歌收录站点
- Markdown基础语法-Github
- Hexo官方Emoji插件使用说明
- 通过主题将md文档显示在网页上时,不需要显示在网页的
README.md
注意通过站点配置过滤 - 还有需要注意的是使用表情
emoji
在hexo
中需要插件⊙﹏⊙ - 配置过程中遇到其它问题可以根据自己的主题项目结构进行查看并个性化修改配置文件,下面是
Annie
项目结构:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36Annie
├─languages #国际化语言支持
├─layout #html页面模板
│ └─_partial
│ ├─custom
│ ├─plugin
│ │ ├─clipboard
│ │ ├─comment
│ │ ├─share
│ │ └─statistics
│ ├─post
│ └─widget
├─scripts #站点脚本
└─source #主题资源
├─css
│ └─_highlight
├─img
│ ├─post-cover
│ ├─quote
│ └─random
├─js
└─plugin
├─chinese
├─clipboard
├─comment
├─fancybox
├─gallerypage
│ └─images
├─imgLazyLoader
├─imgResize
├─love
├─motto
├─nicescroll
├─search
├─toc
└─vibrant
其它问题解决
关于网站统计问题
我自己在配置百度统计的时候直接放上去ID是没有反应的,获取不到,不知道为什么
最后解决方案是寻找网站html页面模版,在\layout\_partial
找到footer.ejs
查看里面的统计模块我直接在busuanzi下面照葫芦画瓢加了一行<%- partial('plugin/statistics', {type: 'baidu-analysis'}) %>
然后按\plugin\statistics
找到不同统计设置文件,直接在里面增加自己的百度统计ID。
百度统计的代码获取中有一行hm.src = "https://hm.baidu.com/hm.js?a087f930b192cdc0461708562e128e6b";
其中hm.js?
后面的就是自己的百度统计ID
(类似的问题也可以这样尝试自己解决)
关于域名解析后开启CDN加速问题(阿里云)
域名解析按照上面链接食用即可,关于CDN加速,阿里云内都有详细介绍,如:如何配置CNAME?
很坑爹的是阿里云里面的动态加速不要开!不要开!不要开!
我一打开它就页面重定向过多报错,找了老久才发现原因。
后面的HTTPS配置,阿里云可以免费申请SSL证书,详情:如何配置HTTPS?
不用阿里云的也差不多,配置证书方式可能不一样,
不使用证书的话浏览器地址栏左侧可能会提示你该网站不安全,
有的甚至还会在打开网页的时候必须手动点击来确认打开(比如谷歌)
网站根目录有些文件需要排除出渲染覆盖范围
在站点配置文件
_config.yml
中进行修改
注意排除的是/source/
文件夹下需要排除的文件:
(最好是将不需要被访问的都屏蔽)
1 | #directory |
部分Markdown语法渲染出错
我自己学习写Markdown的时候使用的是VNote编辑器来写的
在它的默认渲染下脚注表情等等显示很正常,但是问题来了
部署到服务器上后,网页上的脚注就是显示不正常,总是会被解析成超链接
搜了半天超链接和都是没有用的,最后想到编辑器有选择渲染器的选项栏
拨云见日=-=,npm官方hexo-renderer-markdown-it插件
最后建议还是不用这些工具,慢慢写着就记住了一些md语法