github+hexo 搭建个人博客

简介: 首先附上小编自己的博客:http://www.hiekay.com/2018/09/04/github-hexo-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/准备工作1、安装...
  • 首先附上小编自己的博客:

http://www.hiekay.com/2018/09/04/github-hexo-%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/

准备工作

  • 1、安装git (自己搞定)

  • 2、配置 git

生成秘钥:

git config --global user.email "xxx@qq.com" # 填写你github注册并且验证的邮箱

git config --global user.name "xxxx" # github 用户名

ssh-keygen # 会出现下面的内容,一直按Enter键就行

Generating public/private rsa key pair.

Enter file in which to save the key (/home/logan/.ssh/id_rsa):

/home/username/.ssh/id_rsa already exists.

Overwrite (y/n)? #因为我已经生成过了所以提示,一直回车即可

打开用户目录下的 .ssh 目录下面生成 id_rsa(私钥) id_rsa.pub(公钥)两个文件,

打开id_rsa.pub,复制里面的内容,到github

img_209c1f868c0d814f8b3ace440bb21456.png
image
img_ed90834eccc872197d441a61b6cfda6d.png
image
img_0c6530103afe0220ff252b1b203bf3b8.png
image

添加完之后

  • 3、测试

ssh -T git@github.com

输出 You've successfully authenticated 表示添加key 成功.

一、注册 github账号

https://github.com

二、建仓库

  • 1、新建仓库
img_dd6b8c4367f8d587b416d0bdcbf95fe4.png
image
  • 2、填写仓库名,创建仓库,用于放网站
img_0f424a318a1069090251033a9bbfb1f9.png
image
  • 3、开启github pages
img_a09cac5b5d37c9a4495a5203412b647c.png
image

开启 github pages

img_c69709e67a6bbd844850da052dfbea82.png
image
  • 4、再建一个仓库用于放文章、配置。 这个仓库名字随意,比如:blogSource

三、创建本地仓库

准备工作

  • 1、找一个目录来作为你本地的仓库,比如我的是”D:\gitblog”,那么就在gitblog文件夹下初始化仓库,将第二步中创建的放网站的仓库clone到该文件夹中。

git clone xxx.git

四、安装hexo

node -v //查看版本

  • 1、安装 ,打开git 或cmd

npm config set registry http://registry.cnpmjs.org/ # node 的源有很多,切换方式也很多,可以自行选择

npm install hexo -g #全局安装hexo,可能需要3分钟 出现warn警告信息不用管。

npm update hexo -g # 更新

因为Hexo 3.0 把服务器独立成了个别模块,您必须先安装才能使用。

npm install hexo-server --save #安装服务

npm install hexo-deployer-git --save

  • 2、初始化 hexo , 我是在文件夹”D:\gitblog\hexo”下

> mkdir hexo #创建一个文件夹,初始化hexocd hexo

> hexo init # 初始化 hexo 文件夹 成功就会提示

当你看到Start blogging with Hexo! 恭喜!框架就已经搭建好了

执行以下命令就可以在本地起服务,进入hexo 目录下

> hexo server

然后访问[http://localhost:4000/](http://localhost:4000/),就能看到自己博客的雏形了

![image](http://upload-images.jianshu.io/upload_images/5110710-112987a2d27d3620?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

hexo文件夹的作用

hexo/_config.yml #这个是hexo 配置文件

hexo/.deploy_git/ # 这个目录下面存放的是hexo 自带的git 配置

hexo/node_modules/ # hexo 需要的node js 模块

hexo/.npmignore # 文件里面存放的是npm需要忽略的文件

hexo/package.json # node.js 的配置文件

hexo/public/ # 存放要生成的静态网页

hexo/scaffolds/ # 生成文档的格式,用于 hexo new 命令 默认是post格式

hexo/source/ # 存放hexo new 生成的源文件,我们写的博客就是在这里

hexo/themes/ # hexo 的主题 都在这里面

  • 3、hexo相关命令

1\. hexo new [layout] "file_name" # 新建 file_name 文章

# hexo new 文章名字 会创建个file_name.md 的文档

# 里面有一些默认的格式,文档的路径 hexo/source/_posts/

# layout 默认的是post 即scaffolds里面的的post文件

# 不写就是默认的,layout 可以自己配置

2\. hexo generate   # 生成静态文档,将文章生成为博客的一部分,可简写为 hexo g

3\. hexo clean  # 清理缓存文件 数据等(非必须),一般上传前线clean再generate

4\. hexo server //本地预览(非必须), 可简写为 hexo s

5\. hexo deploy //推送到GitHub,可简写为 hexo d

  • 4、hexo配置,配置文件 hexo/_config.yml 根据注释配置自己的

# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/

# Site

title: hiekay's blog #网站标题

subtitle: 分享技术的阳光地带 # 副标题

description: Recoding my grow of technology. # 介绍

author: hiekay # 作者

language: zh-CN # 语言

timezone: # 时区

# URL

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: [https://hiekay.github.io/](https://hiekay.github.io/) # 填写github pages 生成的那个网址就ok

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 #默认layout方式

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

filename_case: 0 #将文件名转换为小写或大写,1.小写,2.大写,0.不转换 

render_drafts: false # 渲染草稿

post_asset_folder: false # 开启Assert 文件夹

relative_link: false # 相对路径

future: true

highlight: # 代码高亮

  enable: true #是否启动

    line_number: true # 行号

      auto_detect: false # 自动检测语言类型

        tab_replace: # tab 键代替几个空格

        # 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: maupassant  # 这里配置主题直接写主题的名字就行

        # Deployment  我们需要注意就就是这里

        ## Docs: https://hexo.io/docs/deployment.html

        deploy:

        - type: git

          repo: git@github.com:hiekay/hiekay.github.io.git

        # repo 很多人说不会填写,其实很简单,到你的开启github pages的仓库

        # 页面,里面有一个 git clone 的git 地址,复制就可以了不会出错

        # 最后注意是 git 类型的,不要复制 https 开头的

注意开始的url 和 最后的 deploy 选项,最后配置完成测试一下.

- 5、hexo 主题设置

**参考: https://www.haomwei.com/technology/maupassant-hexo.html **

打开链接:https://github.com/tufu9441/maupassant-hexo

1、点击右上角的Fork 按钮,然后你的github 仓库就会出现这个主题了

git clone 你自己的仓库的主题.git hexo/themes/maupassant (一定要是maupassant 文件夹,如果不是自己重命名)

cd D:\gitblog\hexo\themes

git clone xxx.git

** 路径要对,可以根据自己的情况,不过一定的是 themes 目录下的**

** maupassant 文件夹,这个文件夹肯定不存在,git 会自己创建的**

以后你对主题做的修改就不会丢失而且载搭建博客就会方便很多 ,修改完,记得 git push 就行.

2、保存

cd D:\gitblog\hexo

npm install hexo-renderer-jade –save

npm install hexo-renderer-sass –save

3、编辑Hexo目录下的 _config.yml,将theme的值改为maupassant

4、自己再启动看一下网站主题

img_7202df91d289c760c752448ea6ed4fd1.png
image

5、部署到网上

保证上面都配置对了。

hexo clean

hexo g //hexo generate

hexo d // hexo deploy

现在就是见证奇迹的一刻,打开你的Git网址

img_9ab85bba9323c0965066bab0dda58d6f.png
image

成功了!最后执行:(hexo clean -->hexo generate -->hexo deploy)

你就可以看到你的博客了

记住,每次修改配置信息或者其他必须要执行上面的步骤,才可以使得配置信息生效。

  • 1、新建新建一篇博客,在cmd执行命令:hexo new post “博客名”

hexo n "hai"

可以看到新建的文章

img_bc2c9851220945fff084f4859a1fe0ab.png
image

使用编辑器编好文章,那么就可以使用命令:hexo d -g,生成以及部署,该文章了。

img_bf85bc39bc5451ce45bfa2a6d3b000a9.png
image

到这也就完成了博客搭建,下面介绍的是进阶篇。

六、换成自己的域名

  • 1、首先你需要自己购买好了一个域名。我是在阿里云上买的域名。然后在域名管理控制台,将域名解析与博客地址映射。

首先在本地 cmd 中 ping hiekay.github.io 得到ip。

img_990286a8d3e247b27d87d6ff26669316.png
image

然后在域名解析中配置好

img_0f59800091392c4c050d41508c9cc32b.png
image
  • 2、Hexo目录下的source中建一个CNAME命名的文件夹(切记没有后缀)

内容写你的域名: www.hiekay.com

  • 3、在github中配置域名,在setting 中配置自己的域名。
img_74e015a5776272c415d6a70ee58020de.png
image

最后执行:(hexo clean -->hexo generate -->hexo deploy)

img_e51becd655fed86ac9e50e67b45ae0c3.png
image

七、配置script,用本地Markdown 编辑器。

在Hexo中新建一篇博文非常简单,只需要在命令行中键入以下命令然后回车即可:

hexo new "The title of your blog"

此后Hexo便会在Hexo的根目录的source文件夹下的_posts目录下自动帮你创建相应的md文件。然后我们打开该目录,找到刚刚Hexo自动生成的文件打开编辑即可。

但是当我们的博文比较多,这样我们就需要在成堆的Markdown文件中找到刚才自动生成的文件,这样做显然是一件比较痛苦的事情。

hexo 提供相应的js 脚本,可以在hexo new 之后,使用你想用的应用打开 新建的文章。

首先在Hexo目录下的scripts目录中创建一个JavaScript脚本文件。

如果没有这个scripts目录,则新建一个。

scripts目录新建的JavaScript脚本文件可以任意取名,例如:new_open.js

通过这个脚本,我们用其来监听hexo new这个动作,并在检测到hexo new之后,执行编辑器打开的命令。

  • 1、windows ,如果你是windows平台的Hexo用户,则将下列内容写入你的脚本:

var spawn = require('child_process').exec;

// Hexo 2.x 用户复制这段

hexo.on('new',function(path){

spawn('start  "markdown编辑器绝对路径.exe" '+ path);

});

// Hexo 3 用户复制这段

hexo.on('new',function(data){

spawn('start  "markdown编辑器绝对路径.exe" '+ data.path);

});

eg:


var spawn = require('child_process').exec;

// Hexo 3 用户复制这段

hexo.on('new',function(data){

spawn('start  "D://Program Files//Story//nw.exe" '+ data.path);

});

  • 2、mac ,如果你是Mac平台Hexo用户,则将下列内容写入你的脚本:

var exec =require('child_process').exec;

// Hexo 2.x 用户复制这段

hexo.on('new',function(path){

exec('open -a "markdown编辑器绝对路径.app" '+ path);

});

// Hexo 3 用户复制这段

hexo.on('new',function(data){

exec('open -a "markdown编辑器绝对路径.app" '+ data.path);

});

  • 3、linux

# 如果使用vi的这样写 

# hexo 3.x 路径是[data.path] hexo

 2.x 路径是 [path]

var editor = process.env.EDITOR || 'vi';

var child = require('child_process').spawn;

hexo.on('new', function(data){

child(editor, [data.path], {

      stdio: 'inherit'});

        });# 使用sublime var child = require('child_process').spawn;

hexo.on('new', function(data){

child(subl, [data.pat);

        });

保存并退出脚本之后,在命令行中键入:

hexo new" auto open editor test"

是不是就顺利的自动打开了自动生成的md文件啦~

八、配置图床,博文中的图片

博主推荐七牛云 ,首页-七牛云 ,自行注册。

选择对象存储,内容管理,添加资源,然后你可以设置图片的格式,大小水印,这个按照步骤一个没有问题 。

图片的添加,通过–>更多操作–>内容管理 –>上传文件

图片外链就在图片操作选项里,直接复制到blog,片样式需要在图片外链后加上 “?图片样式”。

-1、qshell 命令行工具 ,

链接:[首页-七牛云qshell ](https://developer.qiniu.com/kodo/tools/1302/qshell

[首页-七牛云qshell ](https://github.com/qiniu/qshell

img_1d51acb25c4cdf183e9dbc8354c31e9a.png
image

下载 qshell 工具之后,配置环境变量。

https://developer.qiniu.com/kodo/kb/1685/using-qshell-synchronize-directories

配置账户

qshell account AK SK

qshell account // 验证

在当前用户主目录中生成 qshell 目录:account.json //C:\Users\hiekay.qshell

使用qupload 命令同步本地图片到七牛云。

  • 2、qshell 使用,配置文档,

文档

配置config


# 这是我的 config 配置文件 upload.conf

{

    "src_dir"      :  "D:\\gitblog\\qshell\\source",    //本地同步路径,为全路径格式

    "bucket"        :  "blog",    //同步数据的目标空间名称

 "key_prefix"    :  "blog", //在保存文件在七牛空间时,使用的文件名的前缀,默认为空字符串

     "ignore_dir" : true,  //保存文件在七牛空间时,使用的文件名是否忽略本地路径,默认为false

    "check_exists"  :  true, //每个文件上传之前是否检查空间中是否存在同名文件

    "overwrite"    :  true, //是否覆盖空间中已有的同名文件,默认不覆盖。

    "rescan_local"  :  true  //默认情况下,本地新增的文件不会被同步,需要手动设置为true才会去检测新增文件。

}

  • 3、上传

qshell qupload [并发数] [本地上传配置文件]

进入 .qshell 目录下

qshell qupload 3 upload.conf

进入七牛云查看

img_01b9b7004c9f63fa0aa13e51756f571e.png
image

九、配置git source 保存文章。

这里就是使用git 管理博客的文章了

  • 1、建立git仓库

cd hexo

git init

-2、 编辑gitignore,忽略不想上传的文件 ,

在.gitignore 文件中添加以下内容


.DS_Store

Thumbs.dbdb.json*.lognode_modules

public.deploy*

debug.logindex.html.npmig*

themes

package.json

*~

  • 3、添加远程仓库 *

git remote add origin 此处填写我们第一步建立的第二个仓库的git clone 的那个git地址

git remote add origin xxx.git

  • 4、 添加文件夹,不会添加已经写在 .gitignore文件里面的文件

git add .

  • 5、 提交到远程仓库

git commit-a-m"commit first"

git push origin master

注意:

在设置图标的时候一直没办法替换点原来的 后来发现 改名后的ico要放在所用主题的 source 下才行 而不是 根目录下的source(值得一提,解析24小时候 域名自带的logo才会消失

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
20天前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
35 3
|
5月前
|
资源调度 前端开发 JavaScript
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
不花一分钱,用Hexo和GitHub Pages搭建个人博客🏢
|
2月前
|
程序员 API Android开发
使用 VS Code + Github 搭建个人博客
搭建个人博客的方案
37 1
|
6月前
|
缓存 JavaScript 网络安全
基于Hexo的主题Fluid搭建Github博客
基于Hexo的主题Fluid搭建Github博客
79 1
|
5月前
Hexo博客添加GitHub评论功能
Hexo博客添加GitHub评论功能
55 0
|
10月前
|
数据采集 JavaScript 程序员
用 GitHub + Hexo 建立你的第一个博客
其中,第一种最简单,也最受限,说不定还会被删帖删号。第二种稍复杂,另外需要自己找部署的服务器,但可定制化较高,是很多程序员的选择。最后一种,是在重复造轮子,不过从另一个方面来看,倒是锻炼编程能力的好方式。
|
9月前
|
JavaScript 网络安全 开发工具
Github+Hexo搭建个人网站详细教程
随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交网站让用户分享信息更加便捷。然后,如果你是一个不甘寂寞的程序猿,是否也想要搭建一个属于自己的个人网站,如果你曾经或者现在正有这样的想法,请跟随这篇文章发挥你的Geek精神,让你快速拥有自己的博客网站,写文章记录生活,享受这种从0到1的过程。
|
10月前
|
JavaScript
Hexo+GitHub搭建个人博客
Hexo+GitHub搭建个人博客
61 0
Hexo+GitHub搭建个人博客
|
11月前
|
缓存 JavaScript 网络安全
使用Hexo在Github上搭建个人博客
使用Hexo在Github上搭建个人博客
93 0
|
12月前
|
JavaScript Shell 网络安全
在Windows环境下使用hexo搭建博客以及部署到gitee / github
在Windows环境下使用hexo搭建博客以及部署到gitee / github
151 0