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:Usersadmin.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/1f8107a8778chttps://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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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 在	hemes
extlayout\_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 #生成并上传

  

原文地址:https://www.cnblogs.com/qxp140605/p/11553440.html