kevin,杨凯

  • 主页
  • 所有文章
  • 随笔
  • 关于我
所有文章 关于我

kevin,杨凯

  • 主页
  • 所有文章
  • 随笔
  • 关于我

说一说github上免费搭建自己的博客

2016-07-21

昨天是帝都发大水的日子,我为了上班徒步了半个多小时到公司,为的是不矿工,等到了下午公司人性化的发邮件,当天考勤异常不扣工资,4点下班,我对这么人性的公司说一句太好了,所以今天更新我在github上第一次文章《github搭建博客》

好了不废话了,下面开始我的搭建工作!

首先我们先要在本地搭环境:

1.安装Node(必须)

2.安装Git(必须)

3.申请GitHub(必须)

注:如上三步我就不做详细介绍怎么安装了,这都是程序猿的基本搭配,实在不会可以google,so一把!下面开始我们的搭建安装博客!(win下搭建)

1)正式安装HEXO 

可以打开CMD或gitBash命令行执行如下npm install -g hexo 安装hexo

2)初始化你的本地hexo项目

打开你本地自己项目目录,我自己的项目目录:D:/mybolg,用命令行打开,然后在当前项目里初始化hexo

hexo init

好啦,至此,全部安装工作已经完成!

3)生成静态页面

现在你的项目中有了hexo的基本架构和目录了我们需要生成静态页到项目

hexo generate 或 hexo g

现在我们可以本地启动访问操作了

hexo server

好了启动了,我们可以在浏览器中访问地址http://localhost:4000 了,这里我就成功了,但是有的人可能遇到了报错:

ERROR Plugin load failed: hexo-server

解决方法,执行命令:

npm install hexo-server

现在我们本地hexo已经装好了,可以说基本完成了一般了,下面重点来了,我们要在github上搭建博客了!!

1)建立Github Pages

这一步说简单也简单,说复杂也复杂,下方新手牢记我下面说的每一步!

一定要注意这一步,看一看你github的用户名,看一看你github的用户名,看一看你github的用户名 重要的是事情说三遍!下边我们开始在github上创建新仓库,创建一个仓库,但是这个仓库是有规则的,其格式必须为:yourusername.github.io而仓库命名格式中的yourusername是你的github用户名。笔者的github用户名是ithack。所以仓库命名格式则是ithack.github.io

由于笔者有ithack.github.io这个仓库,所以我下述效果图提示已存在。纯属作为演示。

创建仓库成功后继续如下图操作:

由于笔者已经有创建成功,所以会有第一个红框内的提示的http://ithack.github.io 的连接,你第一次进来是没有的,只需要点击下边的Launch automatic page generator 走下一步即可;

这一步就不多说了,直接下一步

这里是选择模版,选择好后点击完成,你的github博客站点就建立好了,现在你可以访问yourName.github.io这个地址了,你会看到你的博客已经初步形成了,这里我们只是用了Github Pages的默认模版,如果你觉得这样就可以了,那么现在你就可以开始你的博客之旅了!

而我的博客到现在还没有弄完,我们要用的是hexo的博客框架!所以下面我们需要配置hexo并与github绑定,在本地写博文后push to github

配置Github和hexo关联

前面我们已经在本地建立了hexo项目,现在我们要把本地和github关联想,我们建立好的东西有:

_config.yml  node_modules    public      source
db.json   package.jsonscaffolds   themes

下面我们需要用_config.yml文件,来建立关联,打开_config.yml,翻到最下面,改成我这样子的,注意: : 后面要有空格

deploy:
type: git
repository: git@github.com:ithack/ithack.github.io.git
branch: master

执行如下命令才能使用git部署

npm install hexo-deployer-git --save

网上会有很多说法,有的type是github, 还有repository 最后面的后缀也不一样,是github.com.git,我也踩了很多坑,我现在的版本是hexo: 3.1.1,执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。 忘了说了,我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了,总共就两种协议,相信你懂的。 然后,执行配置命令:

hexo deploy

然后再浏览器中输入http://ithack.github.io/就行了,我的github的账户叫ithack,把这个改成你github的账户名就行了

每次部署的步骤,可按以下三步来进行。

hexo clean
hexo generate
hexo deploy

一些常用命令:

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本

一些基本路径

文章在source/_posts,如果你不怕麻烦的话可以跟我一样直接用vim去编辑,支持markdown语法,你有好的编辑软件,给我也推荐下,感激不尽?。如果想修改头像可以直接在主题的_config.yml文件里面修改,友情链接,之类的都在这里,修改名字在public/index.html里修改,开始打理你的博客吧,有什么问题或者建议,都可以提出来,我会继续完善的。

赏

有钱没钱捧个场

支付宝
微信
  • 随笔
  • 博客

扫一扫,分享到微信

微信分享二维码
生病!!
  1. 1. 配置Github和hexo关联
  2. 2. 一些基本路径

0 评论
Powered By Valine
v1.5.2
© 2019 kevin,杨凯
Hexo Theme Yilia by Litten
  • 所有文章
  • 关于我

tag:

  • 随笔
  • CSS
  • APP调试
  • eslint
  • vue
  • react
  • MongoDB
  • javascript
  • 跨域
  • nodeJs
  • vue-router
  • css
  • 移动端
  • vue3.x
  • webpack
  • DllPlugin
  • npm
  • package
  • vuedraggable
  • Sortablejs
  • vue异步组件
  • 拖拽
  • Javascript
  • 面试题
  • 深拷贝
  • CSS3
  • transform
  • translate
  • elementUI
  • 封装
  • 面试
  • IOS兼容性
  • JQuery
  • 排序
  • nodejs
  • pageshow
  • pagehide
  • 笔记
  • toast

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 2019年度总结

    2019-12-15

    #随笔

  • vue3配置优化DllPlugin 和 DllReferencePlugin

    2019-08-14

    #vue#vue3.x#webpack#DllPlugin

  • npm install安装本地/私有git源包

    2019-06-28

    #npm#package

  • vue项目如何刷新当前页面-经验总结

    2019-06-13

    #vue

  • 再谈vue3x和elementUI实操记录

    2019-04-19

    #vue#elementUI#封装

  • Eslint安装与配置详解

    2019-04-19

    #eslint#vue#react

  • 记录vue插件开发-手撸toast插件

    2019-01-17

    #vue#笔记#toast

  • 2018我的年度总结

    2019-01-15

    #随笔

  • 回顾React,几个why

    2018-10-23

    #react

  • Vue生命周期全解(vueRouter,keep-alive,生命周期)

    2018-09-26

    #vue#vue-router

  • Vue奇淫技笔记

    2018-09-26

    #随笔#vue

  • vuedraggable 拖拽异步组件问题记录

    2018-07-30

    #vue#vuedraggable#Sortablejs#vue异步组件

  • 移动端pageshow and pagehide

    2018-07-18

    #移动端#pageshow#pagehide

  • vue拖拽组件vue可视化问题记录问题记录

    2018-07-12

    #vue#vuedraggable#拖拽

  • Chrome inspect调试webview的强制开启方法

    2017-10-18

    #APP调试

  • css实现正方形图片展示网格布局

    2017-08-16

    #css#移动端

  • 实战记录:IOS新添加的DOM元素不支持.click的绑定方法

    2017-08-12

    #javascript#IOS兼容性#JQuery

  • 实战记录:IOS关于input聚焦弹出系统虚拟键盘时,挡住input

    2017-08-10

    #随笔#javascript

  • node报错‘listen EADDRINUSE’-暴力解决办法

    2017-07-12

    #nodejs

  • 实战react小记二

    2017-06-30

    #react

  • 实战react小记一

    2017-06-19

    #随笔#react

  • nodeJs+mongodb,nodejs的实战小demo

    2017-05-24

    #nodeJs

  • MongoDB安装配置和启动

    2017-05-11

    #MongoDB

  • css变量与calc()方法简单入门demo

    2017-05-09

    #CSS

  • vue中Swipe插件在data的值更新后为什么不会重新更新dom?

    2017-05-08

    #随笔#vue

  • 说一说第一次用vuejs闯关记录

    2017-04-27

    #vue#Javascript#面试题

  • 前端面试题分享(一)

    2017-03-21

    #随笔#面试

  • 基础面试锦集

    2017-03-16

    #面试

  • 很久没好好更新了

    2016-09-28

    #随笔

  • 今天简单聊一下js的深拷贝(deepClone)

    2016-08-24

    #javascript#深拷贝

  • 关于translate会使内容变得模糊的问题--实战小记

    2016-08-22

    #随笔#CSS3#transform#translate

  • 一道面试题引起的猜想

    2016-08-18

    #Javascript#面试题

  • 常见的JS排序算法的实现

    2016-08-16

    #Javascript#排序

  • CSS3实现关闭X按钮

    2016-08-12

    #随笔#CSS

  • 简单说下this对象

    2016-08-10

    #Javascript

  • 浅谈JavaScript跨域和总结

    2016-08-10

    #随笔#javascript#跨域

  • 聊一聊==运算符

    2016-08-09

    #随笔#Javascript

  • 生病!!

    2016-08-04

    #随笔

  • 说一说github上免费搭建自己的博客

    2016-07-21

    #随笔