一.前期准备

1.注册GitHub账号。

不做说明

2.创建仓库

创建一个新的仓库来放置我们的文件。

3.下载安装Node.js

https://nodejs.org/en/   两个版本,选择右边那个最新版

4.下载安装git

https://www.git-scm.com/download/

5.检查安装

打开你的cmd命令窗口

检查Node.js

node -v

npm -v

检查git

git --version

右键也可以看到你git bash

准备工作结束,开始搭建博客!

二.建立静态网站

1.创建存放博客文件的文件夹

在电脑上找个合适的地方,创建一个myblog文件夹,路径中别有中文,我的是在D:\myblog

从cmd中进入到myblog文件夹,当然你直接进到Blog文件夹右键 git bash here 也可以,都是在Blog文件夹执行命令。

下面的一系列操作都是在myblog文件夹中进行的,cmd保持图片中打开的位置

2.安装Hexo

输入命令

npm install hexo -g

3.检查

输入命令

hexo -version

4.初始化文件

输入命令

实验室网差,等吧... 找个网好的地方...

现在实际上就是在往myblog文件夹装入hexo文件了,可以去文件夹看看。

5.安装完毕!

下面6,7不想看的直接输入命令

hexo g&&hexo s

6.生成静态文件

输入命令

hexo generate

7.开启服务

输入命令

hexo server

如果开启失败,显示端口已经被用了,换一个即可。我的是因为做过一个网站了,这个是做教程弄的。

更换端口命令:

hexo server -p 4444

Hexo已经在运行了,按两次Ctrl+C结束

8.搭建完成

现在我们仅仅是在本地测试完成,接下来要弄到GitHub仓库中,才能在网上访问

三.绑定仓库

1.下载powershell

https://www.mls-software.com/opensshd.html

按住Ctrl+shift+右键,如果出现“此处打开powershell”,那就不需要安装。

2.生成公钥

输入命令

ssh-keygen -t rsa

输入命令后,一直回车就行,公钥放在上面powershell显示的文件夹中,我的是在:C:\Users\10245/.ssh/id_rsa.pub

找到文件,打开复制。

3.创建ssh公钥

在GitHub打开

输入公钥,增加SSH KEY

顺便去仓库,把仓库的ssh地址,复制了

4.配置deployment

打开,根目录下(myblog中)的_config.ymlm,拉到最下面,找到deploy,配置为下图:(注意冒号后面都有一个空格)

5.打开powershell检验(cmd和git都可以)

使用powershell打开myblog文件夹

输入命令,测试连接

ssh -T git@github.com

出现这种,带有“hi 用户名”的才是成功。

****在上传静态文件之前,你可以创建第一篇自己的博客。

cmd打开myblog,输入命令

hexo new post “博客名”

文件路径,也就是紫色文字,

6.上传静态文件

在cmd中打开myblog,执行命令

npm install --save hexo-deployer-git

输入命令

hexo g -d

5.访问博客

上传完成之后,就可以访问我们网上的博客了。我的地址是:https://mayflyhk.github.io/

你的博客地址,参照 https://用户名.github.io/ 填写

gulp的优化方法记录在了这里:https://www.cnblogs.com/Mayfly-nymph/p/10623234.html

其他博客美化教程,抽时间会继续添加。

有什么问题,欢迎加我联系方式询问,喜欢的小伙伴可以关注一波!!!

GitHub+Hexo+gulp搭建博客网站的更多相关文章

  1. Github Pages和Hexo创建静态博客网站

    Github Pages和Hexo创建静态博客网站 安装Node.js 本人是window环境,所以下载window版. 下载地址:https://nodejs.org/en/download/ 下载 ...

  2. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

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

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

  4. Hexo快速搭建博客

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

  5. Django搭建博客网站(四)

    Django搭建博客网站(四) 最后一篇主要讲讲在后台文章编辑加入markdown,已经在文章详情页对markdown的解析. Django搭建博客网站(一) Django搭建博客网站(二) Djan ...

  6. Django搭建博客网站(三)

    Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用 ...

  7. Django搭建博客网站(二)

    Django搭建自己的博客网站(二) 这里主要讲构建系统数据库Model. Django搭建博客网站(一) model 目前就只提供一个文章model和一个文章分类标签model,在post/mode ...

  8. 部署项目到服务器 & 搭建博客网站

    搭建博客网站 作为名程序员,或者是网络编程爱好者,拥有一个自己的博客网站再好不过,本篇文章手把手教你部署自己的网站

  9. 基于Github&Hexo的个人博客搭建过程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. FreeMarker的实例通俗理解

    1.把包lib/freemarker.jar拷贝到项目中 2.  在WEB-INF下新建文件夹templates  在templates下新建test.ftl文件 内容为: <html> ...

  2. scala冒泡排序

    scala冒泡排序: object Maopao { def main(args: Array[String]) { val list = List(1, 23, 432, 10, 23, 42, 3 ...

  3. WPF中在摄像头视频上叠加控件的解决方案

    一.视频呈现 前段时间,在一个wpf的项目中需要实时显示ip摄像头,对此的解决方案想必大家都应该知道很多.在winform中,我们可以将一个控件(一般用panel或者pictruebox)的句柄丢给摄 ...

  4. session的获取

    Springmvc: RequestAttributes ra = RequestContextHolder.getRequestAttributes(); HttpServletRequest re ...

  5. 协程《二》greenlet模块

    一 greenlet模块 如果我们在单个线程内有20个任务,要想实现在多个任务之间切换,使用yield生成器的方式过于麻烦(需要先得到初始化一次的生成器,然后再调用send...非常麻烦),而使用gr ...

  6. BST_insert

    #include <stdio.h> /* printf, scanf, NULL */ #include <stdlib.h> /* malloc, free */ stru ...

  7. 接口测试简单介绍、及jmeter的简单使用

    1.接口测试简单介绍 接口测试其实就是功能测试,是从数据库查询到数据,返回查询结果 接口返回的数据都是json,json是一种通用的数据类型. 接口测试的优点:能在稍微偏底层的地方发现bug,越底层发 ...

  8. 洛谷P4009 汽车加油行驶问题(分层最短路)

    传送门 说好的网络流24题呢……上次是状压dp,这次怎么又最短路了…… 不过倒是用这题好好学了一下分层图最短路 把每一个位置$(x,y)$,油量剩余$k$表示为一个状态,然后转化成一个$n$进制数,这 ...

  9. Java面向对象之异常(异常处理方式)

    一.基础概念 (1)异常:Java程序在运行时期发生的不正常情况. Java就按照面向对象的思想对不正常情况进行描述和对象的封装. (2)异常问题分类: (Throwable:定义对于问题共性的功能. ...

  10. pycharm 2016 注册(pycharm-professional-2016.3.2)

    BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...