Luwang
Luwang
文章54
标签57
分类25
回到首页
文章归档
文章分类
我的朋友
关于博客
Hosted Github
Themenexmoe

UV
PV
闲着也是闲着，不如搭个免费的博客玩玩

闲着也是闲着，不如搭个免费的博客玩玩

2020年02月08日 4.5k 字 大概 21 分钟 阅读次数
  1. 1. 一、软件安装及Github配置
  2. 2. 二、hexo初始化及本地测试
  3. 3. 三、主题下载及配置
  4. 4. 四、cdn设置及图片上传
  5. 5. 五、修改模板写文章
  6. 6. 六、其他

img

在家里呆着，看电视也无聊了吧

那么来学点好玩的呗

首先来看下搭建完的博客的效果吧

可自己前往查看：wallleap

当然啦，还是放在GitHub的比较稳定一点：wallleap

自己欣赏不想看我写的这段可以跳过这一段 img

首先展示一下首页

img

img

img

​ 以上三图都是首页中的

​ 最上面是一张首页轮播图片，图片中间显示头像和社交图标

​ 将光标移到上方或者往下滑，隐藏的导航栏就会显现出来

​ 下面就包括通知、三个图片链接以及显示的部分文章

​ 最底下则是一些网页相关的信息

img

img

img

​ 菜单栏最左边的是网站名称

​ 中间是一些导航菜单链接，点击可前往相关页面

​ 最右边是搜索按钮，点击可以搜索文章

​ 归档、清单下面有二级菜单，主要是后面的分类、标签中的几种

​ 点击归档前往归档页面，文章按时间线排序

img

img

​ 标签、分类页还是挺好看的嘿

img

留言板页面可以留言的

接下来的几个页面就不介绍了

​ 跳过的可以在这里停下来了 img

接下来就教大家怎么搭建属于自己的免费的博客吧

1431316508611068815.jpg

一、软件安装及Github配置

img)img)img

首先我们需要安装两个软件：Git和Node.js

提供一下下载链接：

Git

Node.js

根据自己的系统选择版本，下载安装

这里就不详细演示了

两个都安装好之后可以打开终端或者命令提示符(Mac按Command+空格后输入terminal打开终端、Linux按Ctrl+Alt+T打开终端、Windows系统按WIN+R键打开命令提示符)

输入命令

npm -v

img

git --version

img

能显示出版本号说明node、git已经安装成功了

接下来注册好Github账号及完成相关配置

前往Github官网

Sign up页面输入相关信息(第一个是用户名，登录的时候用的；第二个是邮箱，用于接收验证码和登录；第三个是密码，输个自己记得住的)，没有错误之后点击Sign up for GitHub，注册账号

img

接着点击右上角头像，点击Your repositories

img

到达仓库(repositories)界面，点击New

img

为了不单独购买域名，花额外的钱，咱按照下面操作

前面是用户名，仓库名设置为用户名.github.io，点击Create repository，创建仓库(仓库名不这样设置也行，但现在还是推荐这样设置)

img

接着进入如下页面，左边的暂时不用管，直接点击头像

img

点击Settings

img

点击左侧导航栏中SSH and GPG keys

img

接着打开终端或者命令提示符

分别输入下列命令

git config --global user.name "你的用户名"

git config --global user.email "你的邮箱地址" 

ssh-keygen -t rsa -C "你的邮箱地址"   #需要回车4次左右

进入.ssh目录(Mac、Linux的在~/.ssh下，Windows在C:\Users\用户名.ssh)，打开id_rsa.pub，把里面的内容复制出来

回到网页，单击New SSH key

img

Title随意填，将刚复制的内容粘贴到Key的文本框中，点击Add SSH key

接着在终端或者cmd窗口输入命令

ssh -T [email protected]

显示如下字样，说明连接成功

img

二、hexo初始化及本地测试

img)img)img

接下来可以使用npm安装Hexo了 

npm install -g hexo-cli

如果报的不是关键性错误，可以跳过不管，直接下一步(Mac、Linux可以加上sudo)

进入/home/用户名目录或者磁盘根目录

|Mac、Linux终端下输入cd ~

|Windows比如在E盘，在cmd窗口中输入E:回车

初始化博客目录输入命令

hexo init MyBlog

接着等待下载博客的相关文件到MyBlog

我们再到终端或cmd进入该目录cd MyBlog

接着输入下面的命令生成静态页面

hexo generate   (或 hexo g)

打开hexo本地服务进行测试

hexo server   (或 hexo s)

接着用浏览器访问 http://localhost:4000

能够看到下方页面说明博客已经搭建成功了

img

但这只是默认的主题、配置，我们还需要把这些东西修改成自己的

三、主题下载及配置

img)img)img

到Hexo的主题库中挑选一个主题，地址：https://hexo.io/themes/

我用的主题是Sakura，首先找到主题的仓库地址(或者转到开发者主页，再前往仓库地址)Sakura地址为https://github.com/honjun/hexo-theme-sakura，将文件克隆到themes目录下：

git clone https://github.com/honjun/hexo-theme-sakura.git themes/Sakura1

其他的主题克隆到themes下就OK了

但是Sakura修改的东西有点多，怕你们修改麻烦，开发者直接把所有文件放一起了

我们直接把themes/Sakura1目录下的除了.git和.gitignore的其他文件剪切出来，粘贴到MyBlog目录下，替换原来的文件

完成之后输入命令安装依赖(这一步很重要)

npm install

接着我们开始修改相关的配置文件(建议使用Sublime Text或者VS code修改)

修改hexo配置文件，这个文件是MyBlog/_config.yml(具体可看https://hexo.io/zh-cn/docs/configuration.html)

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站
title: 标题                  #把这里修改为你的站点名(网站标题)subtitle: ''                #副标题，可不输入
description: ''             #描述，可以随便写句话描述你的网站keywords:                   #关键词，可不写(写多个时用,隔开 )author: 作者                #作者名
language: zh-cn             #语言
timezone: 'Asia/Shanghai'   #时区
# URL  网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://用户名.github.io    #站点链接(开启了SSL则要改为https开头)
root: /                        #网站根目录，如果仓库名设置的是上面的那个则不需修改。如果是其他的(例如blog)请加上那个名称(/blog)，上面那个链接也要加上(/blog)
permalink: :year/:month/:day/:title/  #文章的链接格式permalink_defaults:


# Directory 文件目录，可以不修改source_dir: sourcepublic_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md      #如果你不想让hexo把这篇文章渲染成你设置的布局的html，可以把文件名写在这

# 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:                        #高亮，由于我们使用的Sakura用的自己的高亮，这里改成false
  enable: false
  line_number: false
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

# Home page setting 主页设置，可不修改
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# 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: Sakura      #主题名字，你想换哪个主题，下载到themes目录下之后到这来修改

# Deployment  部署相关
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: [email protected]:用户名/用户名.github.io.git
    # github: https://github.com/honjun/honjun.github.io.git
    # coding: https://git.coding.net/hojun/hojun.git
  branch: master

# backup  备份
backup:
  type: git
  message: backup my blog of https://yourname.github.io/
  repository:
    github: http://github.com/用户名/用户名.github.io.git,backup
    # coding: https://git.coding.net/hojun/hojun.git,backup

#RSS
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

这里暂时就配置到这里了，但是，这个文件还需要接着修改，我们以后再说

修改主题配置文件，这个文件是MyBlog/themes/Sakura_config.yml

# site name 
prefixName: 前缀名         #红框部分
siteName: 网站名           #绿框部分

img

# favicon and site master avatar
favicon: /images/favicon.ico     #自己到MyBlog\themes\Sakura\source\images下替换为自己的
avatar: /img/custom/avatar.jpg   #头像等下弄
url: http://用户名.github.io      #网站链接
description: Live your life with passion! With some drive! #描述自己
cdn: https://cdn.jsdelivr.net/gh/用户名/cdn@latest        #暂时先这样写着，等下讲
pjax: 1                           #开启pjax，不修改
# 1开启
mathjax: 1                        #开启数学公式渲染

notice: hexo-Sakura主题已经开源，目前正在开发中...  #公告通知，自己写
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/loader/orange.progress-bar-stripe-loader.svg
#上面这个是图片懒加载，可以不修改，就直接借用作者cdn地址

menus:  #下面是导航栏的内容 path是路径  fa是图标，图标可以自己前往查看，直接把名字复制过来就行，地址：http://fontawesome.dashgame.com/
  首页: { path: /, fa: fa-fort-awesome faa-shake }     #首页不修改
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: {  #这个是归档页，不修改 后面的都是归档下的二级菜单
    技术: {path: /categories/技术/, fa: fa-code },            #categories是分类，所以如果你需要这些页面能使用，需要有这种分类的文章
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
    转载: {path: /categories/转载/, fa: fa-book }
  } }
  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce },    #tags是标签，所以如果你需要这些页面能使用，需要有这种标签的文章
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }
  赞赏: { path: /donate/, fa: fa-heart faa-pulse }
  关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    我？: {path: /about/, fa: fa-meetup}, 
    主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
    Lab: {path: /lab/, fa: fa-cogs },
  } }
#  客户端: { path: /client/, fa: fa-android faa-vertical } #这个不需要可以直接注释或者删除
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }


# 主页文章排序方式: -1: 新文章在前，1: 旧文章在前.
homePageSortType: -1
# 主页文章显示数量
homeArticleShown: 10
# 背景图片 更好的修改(以后可以修改成自己的)--就是最开始出现的那个大图片
bg:
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(1).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(2).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(3).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(4).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(5).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(6).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(7).jpg.webp
  - https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/cover/(8).jpg.webp

# 背景图片样式 空 原图效果 filter-dim 阴影 filter-grid 横条 filter-dot 点点
# startdash url, title, desc img
startdash: 
  - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
  - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}
  - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}

就是主页的通知下面那三个图片

img

# 建站时间，比如你是今天(2020年2月8日)搭建的这个博客则可以写为：
siteBuildingTime: 02/08/2020

#social  url, img PC端配置  主页的社交图标--PC端可以看见，修改成自己的链接
social:
  github: {url: http://github.com/honjun, img: /img/social/github.png}
  sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}
  wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}
  zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}
  email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}
  wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}

#social  url, img 移动端配置  手机端的
msocial:
  github: {url: http://github.com/honjun, fa: fa-github, color: 333}
  weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

img

img

#捐赠页面的
donate:
  paypal: https://www.paypal.me/hojuncn  #自己到PayPal注册账号，修改链接为自己的
  alipay: /img/custom/donate/AliPayQR.jpg  #下面这三个图片等下加上
  wechat: /img/custom/donate/WeChanQR.jpg
  wechatSQ: /img/custom/donate/WeChanSQ.jpg

#首页视频不修改
# 视频地址为https://cdn.jsdelivr.net/gh/honjun/[email protected]/Unbroken.mp4，配置如下
movies:
  url: https://cdn.jsdelivr.net/gh/honjun/[email protected]
  # 多个视频用逗号隔开，随机获取。支持的格式目前已知MP4,Flv。其他的可以试下，不保证有用
  name: Unbroken.mp4


#音乐
aplayer: 
  id: 2660651585      
  server: netease     
  type: playlist
  fixed: true
  autoplay: false     #进入网页自动播放音乐，false不自动播放，true自动播放
  loop: all           #循环播放
  order: random
  preload: auto
  volume: 0.7         #声音大小
  mutex: true

这个音乐的要讲下

img

就是左下角的这个音乐播放器

我们主要改的就是id和server

server使用的网易云的时候，我们进入网页版的网易云，进入你自己的歌单，看上面链接的最后几位数字，填到id那里就行

img

# Valine 评论模块
valine: true
v_appId:                            #填写AppID
v_appKey:                           #填写AppKey

评论模块主要用在留言板、友链和文章下方，是非常重要的功能

Valine具体内容可以看这个 https://valine.js.org/quickstart.html

我们先进入leancloud注册的页面，注册一个账号https://leancloud.cn/dashboard/login.html#/signup

登录进入之后创建一个应用，名字随便填

img

紧接着点击那个应用的设置按钮

img

进入设置页面后，点击安全中心，在框中输入链接：http://用户名.github.io

img

输入后点击保存，接下来点击应用keys

img

接着分别把图示位置的两个值填到相应位置

评论的差不多就弄好了

四、cdn设置及图片上传

img)img)img

​ 我们这里需要用到GitHub，浏览器输入https://github.com进入网页

新建一个仓库，名字为cdn，勾上初始化复选框，点击Create repository

img

​ 紧接着我们进入该仓库点击Clone or download，点击箭头所指处，复制该地址

img

到终端(命令行)输入

git clone https://github.com/用户名/cdn.git

即git clone加上你复制的链接

这个可以克隆到你喜欢的位置(但别放到MyBlog下)

在下载下来的cdn目录下新建三个文件夹，分别是img、js、css

（当然了，要是觉得麻烦，可以把开发者的cdn克隆下来，再把文件复制到你的cdn目录中）

我们把头像、首页图片、赞赏图片等放到相应的位置去

接着修改README.md文件内容为

# cdn

我的图床地址
https://cdn.jsdelivr.net/gh/用户名/cdn@latest/

上传命令
```
git add . && git commit -m "update" && git push -f
```

方便我们后面使用

接着我们使用上面的那个上传命令，update可改为其他，eg:

git add . && git commit -m "第一次上传" && git push -f

如果是第一次使用GitHub，那么可能会提示输入自己的GitHub用户名和密码

接下来我们就可以直接调用里面的图片、js、css等资源了

所用到的是https://www.jsdelivr.com/?docs=gh提供的

img

不过我们一般只使用一条就行

比如在cdn下的img下的avatar.png文件，链接是

https://cdn.jsdelivr.net/gh/用户名/cdn@latest/img/avatar.png

再比如我的某篇文章的插图cdn/img/pic/wlu/1572956839709.png

https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/pic/wlu/1572956839709.png

以后我们每次想添加图片就复制到img目录下，接着使用上传命令，再用下面的链接使用那个图片

五、修改模板写文章

img)img)img

文章模板是MyBlog/scaffolds/post.md

我改的是

---
title: {{ title }}
date: {{ date }}
author: luwang
avatar: https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/custom/avatar.jpg
authorLink: wallleap.cn
authorAbout: 关于我
authorDesc: 描述我
categories: 
    - c1
    - c2
comments: true
tags: 
    - tag1
    - tag2
keywords: 
description: 
photos: https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/img/banner/banner1.jpg
---
我们的文章写在这里

我们新建文章可以用命令：

hexo new "文章名"

接着将会在MyBlog/source/_posts目录下生成文章名.md文件

我们写文章修改这个文件即可，上面的模板将会在新文件中自动生成

需要了解markdown语法，可以到这里面去看下

http://markdown.xiaoshujiang.com/

不过写文章我们也不需要了解太深，慢慢写着就都会用了

这里给出一些基本的

# 标题一
## 二级标题
### 三级标题 一般到这就行了

> 引用 注意空格

- 列表  还可以用+或*
- 1
- 2

[链接名字](链接地址)

![图片名字](图片地址)
**这是文字粗体格式**
__这是文字粗体格式__
*这是文字斜体格式*
_这是文字斜体格式_
`单行代码，这个是在Esc下方这个按键`

​```语言
名块代码
```

~~删除线~~
分割线
---

***

+++

这三个都可以

就讲这些，其他的自己看看吧

对了，作者还集成了插件hexo-tag-bili和hexo-tag-fancybox_img，可以用来插入B站的视频和图片到文章中

{% bili video_id [page] %}

img

  • {% fb_img src [caption] %}

这个就比如

将会显示一张图片

文章写好之后我们使用命令：

清除缓存文件 (db.json) 和已生成的静态文件 (public)

hexo clean

生成静态页面

hexo generate （或者hexo g）

本地测试

hexo server   （或者hexo s）

测试没问题后使用下面命令部署网站，把生成的静态网页上传到仓库

hexo deploy  （或者hexo d）

接着就可以访问http://用户名.github.io访问你的博客了

六、其他

img)img)img

到上面那样基本上就Ok了

下面讲一点其他的

这个是新建页面的命令

hexo new page 页面名

hexo new page tags    #开启标签页

hexo new page about    #开启“关于”页

hexo new page categories #分类

hexo new page 404     #404

还有安装插件的命令

到插件库https://hexo.io/plugins/找插件

安装插件‍

npm install 插件名 --save

剩下的就剩下博客美化和写文章了

博客美化的下次出教程吧

努力写文章，慢慢充实你的博客吧

明天文章见

img

扫描关注

img

undefined

笔记Hexo
-------------本文结束感谢您的阅读-------------

本文标题:闲着也是闲着，不如搭个免费的博客玩玩

文章作者:luwang

发布时间:2020年02月08日 - 21:02

最后更新:2020年03月29日 - 22:03

原始链接:https://blog.wallleap.cn/2020/02/08/hexo-blog/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

coffee

Blog wallleap , Copyright © 2019-2020 by Luwang All Rights Reserved.

载入时间中...