zoukankan      html  css  js  c++  java
  • 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 #生成并上传

      

  • 相关阅读:
    Knowledge point
    Nagios详解(基础、安装、配置文件解析及监控实例)
    配置网络yum源
    springsecurity整合springboot实现简单认证授权
    使用openssl生成rsa密钥对
    springsecurity实现记住我功能
    springsecurity生成图形验证码并校验
    springsecurity开发基于表单的认证--个性化用户认证流程
    springSecurity自定义用户认证逻辑
    关于JWT分析的文章转载
  • 原文地址:https://www.cnblogs.com/qxp140605/p/11553440.html
Copyright © 2011-2022 走看看