hexo+github搭建个人博客
搭建示例:https://blog.csdn.net/grave2015/article/details/79961843 、 https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html 、https://blog.csdn.net/sinat_37781304/article/details/82729029
hexo官网:https://hexo.io/
hexo中文文档:https://hexo.io/zh-cn/docs/
1.安装hexo
1 2019/9/20最新官网提示初始化hexo 2 $ npm install hexo-cli -g 3 先找个盘建立一个比如hexo的文件 以下步骤在文件内执行git 4 $ hexo init blog (如果你下载有主题文件的话,当git clone themes时就可以结束git指令了,过后直接把下载好的主题文件放在themes文件下即可,当然你要是第一次安装hexo且网速好可以忽略这个提示) 5 $ cd blog 6 $ npm install 7 $ hexo server 8 初始化成功后就可以打开http://localhost:4000/ 9 查看版本:hexo -v
2.生成ssh添加到github上
1 在文价下git 2 git config --global user.name "yourname" 3 git config --global user.email "youremail" 4 这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。 5 以下两条用于检查输入是否正确 6 git config user.name 7 git config user.email 8 然后创建SSH,一直回车,直到语句结束 9 ssh-keygen -t rsa -C "youremail" 10 一般会在C:\Users\admin\.ssh 11 ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。 12 而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key 13 把你的id_rsa.pub里面的信息复制进去。 14 在gitbash中,查看是否成功 15 ssh -T git@github.com
3.将hexo部署在github上
1 打开站点配置文件 _config.yml 2 deploy: 3 type: git 4 repo: https://github.com/YourgithubName/YourgithubName.github.io.git 5 branch: master 6 这个时候需要先安装deploy-git ,也就是部署的命令,这样你才能用命令部署到GitHub。 7 npm install hexo-deployer-git --save 8 然后 9 hexo clean (最好不要) 10 hexo generate 11 hexo deploy 12 等代码上传到github上过后就可以通过https://earwind.github.io/访问博客了 13 过不了多久,再打开你的浏览器,输入你自己的域名,就可以看到搭建的网站啦! 14 15 接下来你就可以正式开始写文章了。 16 hexo new newpapername 17 然后在source/_post中打开markdown文件,就可以开始编辑了。当你写完的时候,再 18 hexo clean 19 hexo g 20 hexo d 21 过后就可以看见更新了
4.多台电脑更新hexo
1 示例:https://blog.csdn.net/eternity1118_/article/details/71194395
5.绑定域名
1 在项目的setting里面,有一个Github page的选项卡,在Custom domain里面填入你自己的域名(blog.resonlei.top,像这样),然后点击save。 2 如果不想设置,也可以在项目的跟目录下面创建名称为CNAME的文件(注意,文件名必须大写,不需要拓展名),文件内容为你要解析的域名,就是设置的那个,其实通过设置进行域名的设置,github会自动在根目录创建一个CNAME的文件(推荐使用这种方法,不然每次更新都要重复第一种方法的操作)
6.更换主题(这里我用的是next)
1 next的使用文档http://theme-next.iissnan.com/getting-started.html#download-next-theme
2 主题优化:https://www.jianshu.com/p/1f8107a8778c 、https://blog.csdn.net/weidong_y/article/details/90904781
7.给NexT主题内添加页面点击出现爱心的效果
1 创建js文件 2 在/themes/next/source/js/src下新建文件clicklove.js,接着把该链接下的代码拷贝粘贴到clicklove.js文件中。 3 代码如下: 4 !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document); 5 修改_layout.swig 6 在\themes\next\layout\_layout.swig文件末尾添加: 7 <!-- 页面点击小红心 --> 8 <script type="text/javascript" src="/js/src/clicklove.js"></script>
8.文章添加分类
1 hexo中有Front-matter这个概念,是文件最上方以 — 分隔的区域,用于指定个别文件的变量。举个栗子,在hexo new post article时会生成article.md文件,文件生成好的文章属性。 2 在其中添加categories属性,再部署之后就可以在分类页看到分类了 3 --- 4 title: hexo next 为文章添加分类 5 date: 2016-03-16 08:12:43 6 tags: 7 categories: 前端 8 --- 9 添加子分类 10 --- 11 title: 搭建phalcon项目 12 date: 2016-03-16 08:12:43 13 tags: 14 categories: 15 - php 16 - 框架 17 - phalcon 18 ---
9.文章添加标签
1 打开命令行,进入博客所在文件夹。执行命令 2 $ hexo new page tags 3 根据上面的路径,找到index.md这个文件,添加type: "tags"到内容中 4 --- 5 title: 标签 6 date: 2017-05-27 13:47:40 7 type: "tags" 8 --- 9 给文章添加"tags"属性 10 --- 11 title: jQuery对表单的操作及更多应用 12 date: 2017-05-26 12:12:57 13 categories: 14 - web前端 15 tags: 16 - jQuery 17 - 表格 18 - 表单验证 19 --- 20 综上可以发现添加标签和分类的设置是一样的
10.添加基于gitment评论功能
示例:https://www.jianshu.com/p/b8255a630d46
11.hexo指令
1 常见命令 2 hexo new "postName" #新建文章 3 hexo new page "pageName" #新建页面 4 hexo generate #生成静态页面至public目录 5 hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) 6 hexo deploy #部署到GitHub 7 hexo help # 查看帮助 8 hexo version #查看Hexo的版本 9 缩写: 10 hexo n == hexo new 11 hexo g == hexo generate 12 hexo s == hexo server 13 hexo d == hexo deploy 14 组合命令: 15 hexo s -g #生成并本地预览 16 hexo d -g #生成并上传