zoukankan      html  css  js  c++  java
  • 使用Hexo框架搭建博客,并部署到github上

    开发背景:年后回来公司业务不忙,闲暇时间了解一下node的使用场景,一篇文章吸引了我15个Nodejs应用场景,然后就被这个hexo框架吸引了,说时迟,那时快,赶紧动手搭建起来,网上找了好多资料一天时间才搭建完成,我的博客地址:博客,记录一下过程,以便以后学习。


    开始搭建

    学习新框架的一般步骤:

    • 中文文档撸一遍,跟着做(Hexo中文文档),一般都会有各种问题出现,当然直接成功的也有,很不幸,我就是出现问题的那一类,没关系,出现问题,解决问题的过程,才能学到更多东西;
    • 上网找一些hexo使用的教程,继续弄;
    • 这个时候要是再有问题就是很难解决的有针对性的问题了,继续上网找相关的解决办法;
    • 网上资源真的很多,很好用,只要想学没有找不到的东西,哈哈哈...

    一、安装

    前提:
    既然是node框架,肯定前提是你已经安装过Node.js(下载地址),另外还需要你安装Git(下载地址);
    如果你已经成功安装了上述程序后,接下来就是hexo的安装:

    $ npm install -g hexo-cli
    

    安装完成以后,需要初始化一下项目,执行下列命令:

    $ hexo init
    $ npm install

    完成以后,项目大概目录就是这样的:

    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes
    

    _config.yml
    网站的配置信息,可以在此配置大部分的参数。后面发布到github上面时,有用到这个文件;

    package.json
    应用程序的信息。


    文件的其他部分的详细解释请看文档,此处只是记录一下搭建以及发布的过程,具体写文章的步骤,先不进行过多说明;


    接下来可以在本地启服务来查看一下项目的初始状态:

    $ npm install hexo-server --save
    $ hexo server

    效果大概就是下面的样子:
    首页
    我稍微修改了一下文字配置,可能你的会跟我的有点不一样,项目能启动就是成功了;


    二、发布到github并设置成个人博客

    1、github上新建一个仓库


    登录自己的github后,在界面右上角用户信息点击左边的加号,新建一个repository:
    图片描述

    然后给新建的仓库起个名字,注意:这个名字必须跟用户名一致,github才会默认设置成用户的博客:
    图片描述

    项目建好以后,就是一些信息的设置:
    图片描述
    图片描述
    设置页面里面有分支选项,如果有master分支,会默认成博客的首选代码;


    2、将本地搭建好的hexo发布到github上:
    将本地代码上传到github上的方法有很多:
    可以用Github Desktop,简单直观,但是需要把之前我们搭建好的项目生成的文件放到GitHub Desktop指定的位置,再上传,感觉不那么智能,还有点麻烦,所以我选择planB,耶!我可真是个小机灵鬼...


    下面是在项目中生成静态文件的命令:

    $ hexo generate
    

    简写,结果是一样的

    $ hexo g

    执行完以上代码,会在项目的根目录下生成public文件夹,选择planA的童鞋就可以将里面的所有文件用GitHub Desktop上传到github上了;


    而另外一种,就是在当前项目直接远程连接自己的github上传文件,这会涉及到SSH(关于SSH是什么,网上有很多详细说明,可以自己查找学习)

    安装插件:

    npm install hexo-deployer-git --save

    修改网站配置文件_config.yml,添加deploy信息:

    deploy:
      type: git 
      repo: git@github.com:wjlilh/wjlilh.github.io.git 
      branch: master 

    上面的repo的配置信息,替换成自己的项目名字


    生成SSH key:

    按照网上的教程生成ssh key的时候是直接ssh-add,但是失败了,调查问题,发现原因是因为,我是第一次使用ssh-agent代理,第一次需要首先执行以下命令,以后就不需要了(具体原来请参考此处链接):

    $ ssh-agent bash

    以上命令回车,启动进程,后再输入命令:

    $ ssh-add ~/.ssh/id_rsa

    图片描述

    按照提示操作输入密码,

    这样就在c盘对应位置生成了ssh-key;

    配置github账户的ssh-key
    打开id_rsa.pub文件将一整串公钥拷贝下来

    进入你的github账户设置,在ssh and GPG keys中新增一个ssh key,如下
    图片描述

    图片描述

    title随意,key填id_rsa.pub文件中内容,保存即可;


    验证是否连接成功:

    $ ssh -T git@github.com

    出现下面的语句说明你的ssh key已经配置好了

    Hi wispyoureyes! You've successfully authenticated, but GitHub does not provide shell access.

    ok,到了这一步,本地跟远程github的连接已经建立,在项目中,直接生成静态文件,上传就可以了:

    $ hexo clean  //清除缓存文件db.json和已生成的静态文件public
    $ hexo g   //生成网站静态文件到默认设置的public文件夹
    $ hexo d   //部署网站到设定的仓库

    这样就完成了个人博客的github部署,直接打开过程中设置的地址就可以查看了,我的是:https://wjlilh.github.io/

  • 相关阅读:
    批量计算(batch computing)、流式计算(stream computing)、交互计算(interactive computing)、图计算(graph computing)
    ETL相关 ELT
    添加AD验证(域身份验证)到现有网站
    android开发导包升级到androidx踩坑记录【转载】
    Android Support v4v7v13和AndroidX理解【转载】
    架构师的成长之路初片~linux-基本防护措施
    架构师的成长之路初片~nginx优化篇
    架构师的成长之路初片~linux-监控脚本
    架构师的成长之路初片~Virtual-自定义容器
    架构师的成长之路初片~Virtual-容器和镜像常用的管理命令
  • 原文地址:https://www.cnblogs.com/twodog/p/12135146.html
Copyright © 2011-2022 走看看