![3097c47b16e092be8aebf1dc447de8b6.png](https://i-blog.csdnimg.cn/blog_migrate/87a32d9a66ac8f02cad4e101898c0659.jpeg)
效果图 手机端 和电脑 自动更换背景
![531c3d88c4a880b19a5e6a206b718653.png](https://i-blog.csdnimg.cn/blog_migrate/090b69a2097f080b77583bc01158dc13.jpeg)
![bb41fa202c79dc8fe8b53fe9c92f54d4.png](https://i-blog.csdnimg.cn/blog_migrate/ac1c2be4acb5d597a6021c7d11824315.jpeg)
![d65636c8fc0716188b100db9061d2db9.png](https://i-blog.csdnimg.cn/blog_migrate/2b3a7fddf3b8be1e4bc23d69703b45a8.jpeg)
搭建自己的博客(一)
前序:
折腾了几天,搞出了git加hexo的博客(带有评论功能),再次记录一下此次搭建的过程。先看看成品:
https://g-ncp.github.io (简约风) 推送一篇特制博文配合微信公众号的原文链接使用,可替代微信公众号留言功能,因为我们知道现在注册的公众号都没有留言功能。 (Windows10)
工具:电脑 手机
既然是git加hexo,那么就先来看看git和hexo是什么。
Git(读音为/gɪt/。)是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds(一个人)为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(可以编辑文本,我感觉挺好用的,博客就是用这个写的)(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
https://www.typora.io/#windows ←—— 这是我用的md编辑器(我直接贴的Windows下载界面),配合博客编辑使用,也可以自行下载。
还有不推荐把软件都装在C盘,也不是太占C盘,就是如果需要重装系统的话,没有用注册表的话,到时候方便些,软件不用重新下载。
安装git :
首先在电脑上安装git,这里给出官方下载链接,https://git-scm.com/downloads 注意与自己的操作系统匹配。
![523818c8a1a15208d1bfd257288e0a20.png](https://i-blog.csdnimg.cn/blog_migrate/7cc13509ec8d784499e90cc3e2ad0c16.jpeg)
双击安装包
![b3b450a65ca3d779f870291072d888c2.png](https://i-blog.csdnimg.cn/blog_migrate/2885636519c72ad1ae49750a9b50b8a3.png)
出现下图,一路默认配置就可以了,
![ceae06b05adf57d215ac24d59e2784d0.png](https://i-blog.csdnimg.cn/blog_migrate/cab7974455ed53347481e87b7cd7969b.png)
安装完成之后,在桌面右键可以看到Git GUI Here Git Bash Here
![f788c91858c9787e40bc8ad51aadcbd6.png](https://i-blog.csdnimg.cn/blog_migrate/a0fd49a71594a6f4976dd435e3aaa78a.jpeg)
连接本地与远程,需要 https协议或者ssh密钥。 我记得好像有三种协议,详情可以百度查看GitHub官网。
下面我们采用ssh密钥的连接方式,首先注册一个GitHub的账户,https://github.com
![25cc38fee23bdc4cbcd97abb46b25149.png](https://i-blog.csdnimg.cn/blog_migrate/30f536bed5ad668334ec1e88be923e7e.png)
注册完成后,使用git命令进行如下操作(即右键选择 Git Bash Here)
![21a67450319e8490a88c0ceee6c05390.png](https://i-blog.csdnimg.cn/blog_migrate/c866010433e6a0f65866c1398a0ff258.jpeg)
1、设置用户名和邮箱 在git命令行中对git进行全局设置, git config –global user.name “用户名”, git config –global user.email 邮箱“;
![e194545b8addbb416b0157d03c1a698e.png](https://i-blog.csdnimg.cn/blog_migrate/987a00519fa0a1fd8a5259eec8a4d409.png)
2、生成SSH key 在git命令行中,输入命令ssh-keygen -t rsa -C “邮箱地址”,连续按三个回车;然后根据返回的信息,找到.ssh目录下的两个文件(C盘目录下user文件夹下); 3、在github上添加SSH key 在github上点击你的头像,下拉菜单中点击“setting”,找到添加SSH key的菜单,然后新增SSH key;把文件id_rsa.pub 里面的内容全部复制到 key编辑框中,标题随意填写,保存完毕; 4、检查SSH key是否有效 在git命令行输入:ssh -T git@github.com;这里会要求你输入SSH key密码,如果刚才生成SSH key时未输入密码,密码就为空;然后看到信息: Hi 用户名! You’ve successfully authenticated;说明配置成功; 再次查看github密钥 登陆到github上查看刚刚输入的SSH key,现在图标的颜色变为绿色,说明密钥配置有效;到这步git已经安装完成。
安装node.js 和部署hexo
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 (一样的不知所云 )
https://nodejs.org/en/ ←—— 正经下载地址。
![4e7ce7cd22c0cc531a33075667c86b1e.png](https://i-blog.csdnimg.cn/blog_migrate/538cbdf7ec2178befd080cbd69f3a1f7.jpeg)
然后默认配置 ,node.js完成。
下面安装hexo ,这里就方便多了,在合适的位置新建一个文件夹,来存放hexo的文件, 我的文件路径 → D:hexo
在这个文件夹里鼠标右键,选择 git bash here 在弹出的黑框里输入命令 npm install -g hexo-cli 回车
![94a86a7e743347c9a07fcce5bd83f75b.png](https://i-blog.csdnimg.cn/blog_migrate/273e5541bf0b6d49cbc0e5657c2fb163.png)
等待完成,再次输入命令 hexo init 回车并等待完成,这个时候我们有了下面这些文件夹,
![e0320254f337fbfdcc5be0486660d16e.png](https://i-blog.csdnimg.cn/blog_migrate/7d089ca02d9ea1b0adcff1f9436566fc.png)
安装deploy-git部署命令 :在命令行输入npm install hexo-deployer-git --save
熟悉hexo的命令 : 可以参考https://www.cnblogs.com/wsmrzx/p/9439448.html
下面是常用的命令:
hexo clean 命令用于清理缓存文件,是一个比较常用的命令
hexo g 命令用于生成静态文件 这是简写 全称是 hexo generate 不过没有必要,简称也是可以的
hexo s 命令用于启动本地服务器,同样是简称 。
hexo d 用于部署网站
hexo new 新建博文 如 hexo new “教程”
在命令行输入 hexo clean 回车 结束后 输入 hexo g 回车 结束后 输入 hexo s 回车 等待~~~ 命令行出现网址 http://localhost:4000/ 之后 在浏览器输入这个网址,就可以访问你的博客了。 命令行CTRL + C 退出 。
选择一个主题
可以发现你的博客很简洁(丑陋),在博客根目录中有 themes 文件夹(上图),为了方便添加评论系统,我选择了一个内置了Valine 评论系统的主题,在https://valine.js.org/hexo.html 网站里收录了不少这样的主题,建议选择一个经常有人维护的项目。 我选择的是https://github.com/theme-next/hexo-theme-next 添加主题的方法是进入themes 文件夹,(为了简便下面我不在说怎么使用 Git bash here 了 ) 命令行输入git clone https://github.com/theme-next/hexo-theme-next.git 回车,文件夹内出现 名hexo-theme-next 的文件夹, 回到博客根目录,用记事本或其他方便的应用打开_config.yml 找到theme 将后面的 landscape 改为 hexo-theme-next (你下载的主题名) 然后 hexo clean +hexo g+ hexo d +hexo s 查看新主题。
![5bfefa72d5953f5ffed6da3e90cd2d5d.png](https://i-blog.csdnimg.cn/blog_migrate/a9cfdc3db47208da372b9e863ef7e001.png)
关联github和hexo
登录GitHub账户(看不懂就网页翻译),新建一个仓库(点击头像左侧的加号,下拉菜单选择new repository)名字为 你的用户名加http://github.io 选用公共仓库,毕竟我们喜欢白嫖。 !下面图片少了一个步骤,Initialize this repository with a README前面的方框点上对号
![19f463cbeafae2efa3cffaa42e3589c3.png](https://i-blog.csdnimg.cn/blog_migrate/5a2ae3699019f6b33f607d0cd85f046b.jpeg)
为github选择一个主题: 进入仓库的 Settings (参考路径h ttps://http://github.com/你的用户名/你的用户名.http://github.io/settings) 向下滑动 ,到GitHub Pages 选择 一个主题 随意选择
![7e2559099d86a7fd21fd7a1b31c52243.png](https://i-blog.csdnimg.cn/blog_migrate/c75a0d6f0ce5c9effdc9e2bb6b1d0271.png)
![8972727c46dd6e4e3f8a603004cec166.png](https://i-blog.csdnimg.cn/blog_migrate/63aaeca8a0812b6d135305f66051bc8f.jpeg)
接着打开博客配置文件 _config.yml 找到 deploy 进行下面的配置(如图) 添上你的GitHub用户名
![692883686ed50617b50135bd291818c6.png](https://i-blog.csdnimg.cn/blog_migrate/7f6a3c1a0201bd2371885c4de27ea155.png)
在repository 后面添加库链接就可以了 有的教程是加 git@github.…… 这是两种协议,使用ssh协议,将公钥放到GitHub上,私钥留在电脑里,每次push会自动对比公钥私钥,免密使用。
我使用https协议是因为我遇到了一些问题。
最后 hexo clean hexo g hexo d 三件套 然后浏览器访问https://用户名.http://github.io 就OK了。