注册Github账号

这里我们就不多讲了,小伙伴们可以点击这里,进入官网进行注册。

创建仓库

图片来自Github

登录账号后,在Github页面的右上方选择New repository进行仓库的创建。

图片来自Github

在仓库名字输入框中输入:

Github昵称.github.io

然后点击Create repository即可。

生成添加秘钥

在终端(Terminal)输入:

ssh-keygen -t rsa -C "Github的注册邮箱地址"

一路Enter过来就好,待秘钥生成完毕,会得到两个文件id_rsaid_rsa.pub,用带格式的记事本打开id_rsa.pub,Ctrl + a复制里面的所有内容,然后进入https://github.com/settings/ssh

图片来自Github

将复制的内容粘贴到Key的输入框,随便写好Title里面的内容,点击Add SSH key按钮即可。

安装node.js

点击进入node.js官网

图片来自node.js官网

目前node.js有两个推荐版本,分为通用版最新版,点击可直接进行下载。下载好后,按照既定的套路安装即可。

安装git

这里说的git实则是为了使用git指令,我们的git使用一般有两种方式,一种是图形化界面(GUI),另一种是通过命令行,我们这里要使用的是后者,点击这里进入git的下载网站下载git的安装包。

图片来自git

有人说,Mac自带git指令;也有人说安装xcode就可以使用git指令。因本人已经忘记当初自己是如何安装git的,所以大家根据自己的实际情况做决定吧。

安装配置hexo

强调一下,这一步使我们搭建博客的核心,是重中之重。

图片来自hexo

有能力的同学可以选择进入官网自行查看hexo官方文档,愿意听我叨叨的同学可以继续往下看。

接下来我们的操作都将在Terminal终端进行:

  • 定位博客本地放置的路径
$ cd 文件夹

定位博客所在目录

强调:强烈建议不要 选择需要管理员权限才能创建文件(夹)的文件夹。

  • 下载安装hexo
$ npm install -g hexo-cli

安装好hexo以后,在终端输入:

$ hexo

若出现下图,说明hexo安装成功:

hexo安装成功
  • 初始化博客
// 建立一个博客文件夹,并初始化博客,<folder>为文件夹的名称,可以随便起名字
$ hexo init <folder>
// 进入博客文件夹,<folder>为文件夹的名称
$ cd <folder>
// node.js的命令,根据博客既定的dependencies配置安装所有的依赖包
$ npm install

初始化博客以后,我们可以看到博客文件夹里的文件是这样的:

hexo博客文件夹
  • 配置博客

基于上一步,我们对博客修改相应的配置,我们用到_config.yml文件,下面是该文件的默认参数信息:

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/ # Site
title: # The title of your website
subtitle: # The subtitle of your website
description: # The description of your website
author: # Your name
language: # The language of your website
timezone: # URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com/child
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: # Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: # Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: # Category & Tag
default_category: uncategorized
category_map:
tag_map: # Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss # Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type:

看到这里,大家千万别被一长串英文给吓到了,我们实际上要修改的配置只有几项,拿我自己的配置,我们继续往下看:

1. 修改网站相关信息

title: inerdstack
subtitle: the stack of it nerds
description: start from zero
author: inerdstack
language: zh-CN
timezone: Asia/Shanghai

language和timezone都是有输入规范的,详细可参考语言规范时区规范

注意:每一项的填写,其:后面都要保留一个空格,下同。

2. 配置统一资源定位符(个人域名)

url: https://xxx.github.io/

对于root(根目录)、permalink(永久链接)、permalink_defaults(默认永久链接)等其他信息保持默认。

3. 配置部署

deploy:
type: git
repo: https://github.com/iNerdStack/inerdstack.github.io.git
branch: master

其中repo项是之前Github上创建好的仓库的地址,可以通过如下图所示的方式得到:

图片来自Github

branch是项目的分支,我们默认用主分支master。

发表一篇文章

在终端输入:

// 新建一篇文章
hexo new "文章标题"

我们可以在本地博客文件夹source->_post文件夹下看到我们新建的markdown文件。

md文件

用Markdown编辑器打开文件,我们可以看到这样的内容:

md文件自动生成内容

我们写下:

你好,欢迎来到我的个人技术博客。

输入文章内容

保存后,我们进行本地发布:

$ hexo server

如下图:

本地发布博客

打开浏览器,输入:

http://localhost:4000/

我们可以在浏览器端看到我们搭建好的博客和发布的文章:

本地博客发布

当然,我们也可以手动添加Markdown文件在source->_deploy文件夹下:

手动添加markdown文件

其效果同样可以媲美hexo new <article>

本地发布效果图

但是毕竟我们目前发布的只有本机看得到,怎么让其他人看到我们写的博客呢?这时候我们来看看博客的部署。

我们只要在终端执行这样的命令即可:

$ hexo generate
$ hexo deploy
如果出现 error deployer not found:github 的错误,执行npm install hexo-deployer-git --save,再执行hexo deploy
 

这时候我们的博客已经部署到网上了,我们可以在浏览器地址输入栏输入我们的网址即可,如我的博客是:inerdstack.github.io。(我转的就不改了。)


更新20170310

  • 密钥生成文件的位置为:

    windows: C:/Users/用户名/.ssh/
    mac: ~/.ssh/
  • .ssh文件为隐藏文件,需要先设置隐藏文件可见才可以看到

  • npm install时,出现npm error: RPC failed错误
    将npm镜像修改为淘宝镜像,详细修改方式详见:http://blog.csdn.net/zhy421202048/article/details/53490247

更新20170312

  • Deployer not found: git
    在终端执行命令:

    npm install hexo-deployer-git --save

    然后继续执行hexo deploye指令进行部署。

转自:http://www.jianshu.com/p/e99ed60390a8

转:20分钟教你使用hexo搭建github博客的更多相关文章

  1. 使用Hexo搭建GitHub博客(2018年Mac版)

    关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Githu ...

  2. 使用Hexo搭建github博客步骤,超简便

    categories: 工具 tags: git Windows 搭建博客 你只需要node环境和一个github账号就可以开工啦! 本教程适合于Windows环境,Mac教程也大同小异 利用hexo ...

  3. Linux下使用Hexo搭建github博客

    找到一篇靠谱的博客,备份一下: ---------以下原文------------------ Nodejs安装 因为hexo是基于nodejs的应用,所以要先安装nodejs才可以.我这里以Ubun ...

  4. 使用hexo搭建github博客

    Win7系统已经安装了node.js和npm npm install -g hexo-cli 全局安装hexo客户端 hexo init blog 在喜欢的位置初始化blog目录 cd blog np ...

  5. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  6. hexo搭建个人博客

    本文讲述如何用`hexo`搭建个人博客,并托管到`github`.不需要租赁服务器,可完成网站博客的搭建. 安装Hexo安装hexo之前,要先下载安装Node.js和Git,百度搜索找到下载即可.[G ...

  7. Linux下使用 github+hexo 搭建个人博客05-next主题接入评论系统

    静态站点拥有一定的局限性,因此我们需要借助于第三方服务来扩展我们站点的功能. 而评论系统是最常用于和网站用户交流的,因此本章讲解在 next 主题,如何接入评论系统. 参考网站:Next 使用文档,第 ...

  8. 利用Hexo搭建个人博客-博客发布篇

    通过 <利用Hexo搭建个人博客-环境搭建篇> 以及 <利用Hexo搭建个人博客-博客初始化篇>,我们了解到了利用Hexo搭建个人博客需要的环境以及配置,下面这篇文章将会介绍如 ...

  9. 利用Hexo搭建个人博客-博客初始化篇

    上一篇博文 <利用Hexo搭建个人博客-环境搭建篇> 中,我们讲解了利用Hexo搭建个人博客应该要配置哪些环境.相信大家已经迫不及待的想要知道接下来应该要怎么把自己的博客搭起来了,下面,让 ...

随机推荐

  1. awk数组结合+=统计题

    awk增加统计列值为增加列数或进行运行结果统计,使用符号 + =.增加的结果赋给符号左边变量值,增加到变量的域在符号右边.例如将 $ 1加入变量total,表达式为toatl+=$1.列值增加很有用. ...

  2. WEB渗透测试之漏扫神器

    AppScan 对现代 Web 应用程序和服务执行自动化的动态应用程序安全测试(DAST) 和交互式应用程序安全测试 (IAST).支持 Web 2.0. JavaScript 和 AJAX 框架的全 ...

  3. 知识点干货—多线程同步【6】之synchronized

    "明日复明日,明日何其多. 我生待明日,万事成蹉跎. 世人若被明日累,春去秋来老将至. 朝看水东流,暮看日西坠. 百年明日能几何?请君听我明日歌. 明日复明日,明日何其多! 日日待明日,万世 ...

  4. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

  5. PHP可以通过类名调用非静态方法

    今日有兄弟遇上一个问题,就是可以通过class名称直接调用该类中的函数,我测试了一下,确实可以,概念中是只有静态方法才可以这样调用的,现在 被刷新了,于是我在方法中加入一行$this相关的操作,再运行 ...

  6. 架设rsync服务器同步数据

    什么是rsync rsync 是一个快速增量文件传输工具,它可以用于在同一主机备份内部的备分,我们还可以把它作为不同主机网络备份工具之用.本文主要讲述的是如何自架rsync服 务器,以实现文件传输.备 ...

  7. java中队列Queue的使用

    1.在java5中新增加了java.util.Queue接口,用以支持队列的常见操作.Queue接口与List.Set同一级别,都是继承了Collection接口.Queue使用时要尽量避免Colle ...

  8. BZOJ 2733: [HNOI2012]永无乡 [splay启发式合并]

    2733: [HNOI2012]永无乡 题意:加边,询问一个连通块中k小值 终于写了一下splay启发式合并 本题直接splay上一个节点对应图上一个点就可以了 并查集维护连通性 合并的时候,把siz ...

  9. CF 208E. Blood Cousins [dsu on tree 倍增]

    题意:给出一个森林,求和一个点有相同k级祖先的点有多少 倍增求父亲然后和上题一样还不用哈希了... #include <iostream> #include <cstdio> ...

  10. 树莓派上运行.net core 2.0程序

    记录中 参考: https://www.cnblogs.com/songxingzhu/p/7399991.html https://www.cnblogs.com/goodfulcom/p/7624 ...