转：20分钟教你使用hexo搭建github博客

2023-02-14 07:58:45

注册Github账号

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

创建仓库

转：20分钟教你使用hexo搭建github博客
图片来自Github

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

转：20分钟教你使用hexo搭建github博客
图片来自Github

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

Github昵称.github.io

然后点击Create repository即可。

生成添加秘钥

在终端（Terminal）输入：

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

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

转：20分钟教你使用hexo搭建github博客
图片来自Github

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

安装node.js

点击进入node.js官网

转：20分钟教你使用hexo搭建github博客
图片来自node.js官网

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

安装git

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

转：20分钟教你使用hexo搭建github博客
图片来自git

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

安装配置hexo

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

转：20分钟教你使用hexo搭建github博客
图片来自hexo

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

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

  • 定位博客本地放置的路径
$ cd 文件夹
转：20分钟教你使用hexo搭建github博客
定位博客所在目录

强调：强烈建议不要 选择需要管理员权限才能创建文件（夹）的文件夹。

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

安装好hexo以后，在终端输入：

$ hexo

若出现下图，说明hexo安装成功：

转：20分钟教你使用hexo搭建github博客
hexo安装成功
  • 初始化博客
// 建立一个博客文件夹，并初始化博客，<folder>为文件夹的名称，可以随便起名字

$ hexo init <folder>

// 进入博客文件夹，<folder>为文件夹的名称

$ cd <folder>

// node.js的命令，根据博客既定的dependencies配置安装所有的依赖包

$ npm install

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

转：20分钟教你使用hexo搭建github博客
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上创建好的仓库的地址，可以通过如下图所示的方式得到：

转：20分钟教你使用hexo搭建github博客
图片来自Github

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

发表一篇文章

在终端输入：

// 新建一篇文章

hexo new "文章标题"

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

转：20分钟教你使用hexo搭建github博客
md文件

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

转：20分钟教你使用hexo搭建github博客
md文件自动生成内容

我们写下：

你好，欢迎来到我的个人技术博客。
转：20分钟教你使用hexo搭建github博客
输入文章内容

保存后，我们进行本地发布：

$ hexo server

如下图：

转：20分钟教你使用hexo搭建github博客
本地发布博客

打开浏览器，输入：

http://localhost:4000/

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

转：20分钟教你使用hexo搭建github博客
本地博客发布

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

转：20分钟教你使用hexo搭建github博客
手动添加markdown文件

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

转：20分钟教你使用hexo搭建github博客
本地发布效果图

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

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

$ hexo generate

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

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

转：20分钟教你使用hexo搭建github博客

更新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

上一篇：Redis以及Redis的php扩展安装无错版


下一篇：搭建github博客，hexo主题