开发背景:年后回来公司业务不忙,闲暇时间了解一下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/

使用Hexo框架搭建博客,并部署到github上的更多相关文章

  1. 基于Hexo搭建博客并部署到Github Pages

    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...

  2. Note | 用Hugo搭建博客并部署到GitHub Pages

    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...

  3. 搭建hexo博客并部署到github上

    hexo是由Node.js驱动的一款快速.简单且功能强大的博客框架,支持多线程,数百篇文章只需几秒即可生成.支持markdown编写文章,可以方便的生成静态网页托管在github上. 感觉不错. 前端 ...

  4. 史上最详细“截图”搭建Hexo博客并部署到Github

    http://jingyan.baidu.com/article/d8072ac47aca0fec95cefd2d.html 大家也搭建过博客,很多时候,按着教程来做就可以了,但是我当时为了搭建Hex ...

  5. Linux下使用 github+hexo 搭建个人博客02-hexo部署到Github Pages

    之前的这篇文章<Linux下使用 github+hexo 搭建个人博客01-hexo搭建>,相信大家都知道怎么搭建 hexo ,怎么切换主题,并且完成了一篇博文的创建,以及 MarkDow ...

  6. Termux搭建hexo博客并部署到GitHub

    Termux搭建hexo博客并部署到GitHub 安装 termux-change-repo apt update apt install git && nodejs &&am ...

  7. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(一)-附GitHub注册及配置

    前言 有朋友问了我关于博客系统搭建相关的问题,由于是做开发相关的工作,我给他推荐的是使用github的gh-pages服务搭建个人博客. 推荐理由: 免费:github提供gh-pages服务是免费的 ...

  8. 在Windows下使用Hexo+GithubPage搭建博客的过程

    1.安装Node.js 下载地址:传送门 去 node.js 官网下载相应版本,进行安装即可. 可以通过node -v的命令来测试NodeJS是否安装成功 2.安装Git 下载地址:传送门 去 Git ...

  9. Hexo快速搭建博客

    1. 准备工作 ~ 安装node.js -> npm -> hexo-cli ~ 安装git -> 版本控制工具 2. 更换npm(nodejs package manager)源 ...

随机推荐

  1. wireshark抓包实战(八),专家分析

    专家分析是干什么的?它可以帮你统计当前所抓包中丢包.错包等等的出现概率 其中关键字如下: error ===> 出错包 warning ===> 警告包 note ===> 注意包 ...

  2. Linux服务器架设篇,DNS服务器(二),cache-only DNS服务器的搭建

    一.理论基础 什么是cache-only服务器?即不具备自己正反解Zone的能力,仅进行缓存或转发的DNS服务器.其实它也称不上是DNS服务器.但是也是一个必备的知识点. 这种服务器只有缓存搜索结果的 ...

  3. 用ASP.NET MVC5 +SQLSERVER2014搭建多层架构的数据库管理系统

    用http://ASP.NET MVC5 +SQLSERVER2014搭建多层架构的数据库管理系统 背景:前段时间,给一家公司做外包(就是图标是朵菊花那家).为了尽快实现交付,网上四处寻找适合中小型企 ...

  4. 树状数组模板--Color the ball

    Color the ball HDU - 1556 N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的“小飞鸽"牌电 ...

  5. 11-JS变量

    一. JavaScript 是什么 JavaScript是一种运行在客户端(浏览器)的脚本语言 客户端:客户端是相对于服务器而言的,在这里先简单理解为浏览器 浏览器就是一个客户端软件,浏览器从服务器上 ...

  6. 数字电路技术之触发器(基本RS触发器)

    一.触发器的知识 1.触发器是构成时序逻辑电路的基本逻辑部件. 2.[1]它有两个稳定的状态:0状态和1状态:      [2]在不同的输入情况下,它可以被置成0状态或1状态:      [3]当输入 ...

  7. Python-气象-大气科学-可视化绘图系列(一)——利用xarray读取netCDF文件并画图(代码+示例)

    本文原创链接:https:////www.cnblogs.com/zhanling/p/12192978.html 1 import numpy as np import xarray as xr i ...

  8. 小白们错过就没了!Python基础之注释&变量命名

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:DZQTesters PS:如有需要Python学习资料的小伙伴可以加 ...

  9. stand up meeting 12/22/2015 && 用户体验收录

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  完善页面切换,尝试子页面设计    4  完善页面切换和子页面 ...

  10. 数据结构与算法--堆(heap)与栈(stack)的区别

    堆和栈的区别 在C.C++编程中,经常需要操作的内存可分为以下几个类别: 栈区(stack):由编译器自动分配和释放,存放函数的参数值,局部变量的值等,其操作方式类似于数据结构中的栈. 堆区(heap ...