search

rcxd01 / list

About，list，动态站，实时交流群，广告合作与支持。分享有价值的信息
https://rcxd01.github.io/list/
8 stars 4 forks source link

手把手教从零开始在GitHub上使用Hexo搭建博客教程 #1

Open rcxd01 opened 5 years ago

rcxd01 commented 5 years ago

推荐理由： 免费：github提供gh-pages服务是免费的，有300MB空间； 开源：由于github开源的原因，有很多人参与其中，自然技术支持很好。 便捷：博客完全托管在github上，基本上不需要花时间去管理，博客使用Markdown语法，上手很容易。 需要了解的内容（能掌握更好）：

html+css+javascript git基本语法 markdown语法 nodejs 目前，在github上搭建博客系统使用最多就是Hexo和Jekyll。 Hexo是基于Nodejs开发的，Jekyll是基于Ruby开发的。

通过两个系统使用的比较，个人习惯喜欢Hexo，所以本文介绍的是Hexo搭建博客，如果你对Jekyll也有兴趣，可自行学习。

说明： 文中出现的命令，Windows用户注意，命令前面有 $ 的表示在Git Bash中执行，没有的在CMD命令窗口执行。 Linux和MAC系统在终端下不区分。 安装Git客户端

已安装过的用户略过 下载Git客户端：下载地址

Git客户端安装 安装Git客户端：Windows用户直接Next就可以了。Mac和Linxu系统的用户可通过命令方式安装，这里不详细介绍了。 注册GitHub

老手和已注册过的用户略过 打开GitHub官网：https://github.com/ 填写注册信息进行注册操作：没有登录的用户打开网站首页就会显示注册的操作（如图所示），或者是点击Sign up按钮进入注册详情页。

GitHub注册 填写好注册信息，点击Sign up for GitHub(注册)按钮后，接下来是选择协议部分。根据自己的情况选择相关的协议，一般人选的都是免费的那一项。 创建仓库

登录github账号：在github首页点击Sign in按钮进入登录页面。填写用户名或邮箱和密码，点击Sign in按钮登录。

登录GitHub 点击创建仓库：点击在登录的用户图像左边的+号和下三角符号按钮。

点击创建仓库 填写创建仓库信息： 仓库名称必须是用户名.github.io（别问我为什么，人家就是这样规定的），比如我的用户名是SeayXu，就是SeayXu.github.io。

填写创建仓库信息 填写好相关信息，点击Create repository(创建仓库)按钮。 配置SSH

老手和已配置过的用户略过 打开Git Bash终端：在桌面右键，会出现”Git Bash here”的选项，点击即可。 设置user name和email： $ git config –global user.name “你的GitHub用户名” $ git config –global user.email “你的GitHub注册邮箱” 生成ssh密钥:输入下面命令 $ ssh-keygen -t rsa -C “你的GitHub注册邮箱” 一般情况下是不需要密码的，所以，接下来直接回车就好。 此时，在用户文件夹下就会有一个新的文件夹.ssh，里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。 注：id_rsa文件是私钥，要妥善保管，id_rsa.pub是公钥文件。 添加公钥到github： 点击用户头像，然后点击显示的Settings(设置)选项；

Settings

在用户设置栏，点击SSH and GPG keys选项，然后点击New SSH key(新建SSH)按钮；

SSH and GPG keys

将id_rsa.pub中的内容复制到Key文本框中，然后点击Add SSH key(添加SSH)按钮；

Add SSH keys 测试SSH： $ ssh -T git@github.com 接下来会出来下面的确认信息： The authenticity of host ‘github.com (207.97.227.239)’ can’t be established. RSA key fingerprint is 17:24:ac:a5:76:28:24:36:62:1b:36:4d:eb:df:a6:45. Are you sure you want to continue connecting (yes/no)? 输入yes后回车。 然后显示如下信息则OK(其中的SeayXu是用户名)。 Hi SeayXu! You’ve successfully authenticated, but GitHub does not provide shell access. 以上是准备工作。

创建博客文件夹

新建博客文件夹：这里就取名为blog。 mkdir blog 进入到blog文件夹： cd blog # 切换到blog目录 初探Hexo

如果没有安装Nodejs，请先安装Nodejs，Nodejs官网； 以下操作是在blog文件夹中。 安装Hexo

npm install hexo-cli -g hexo全局安装一次就够了，后面可以直接使用hexo相关的操作。 初始化Hexo

hexo init 安装依赖 npm install 启动Hexo hexo server 启动之后，打开浏览器，在地址栏输入：http://localhost:4000，你会看到Hexo的示例页面。 注：此时可以初始化git本地仓库了，或者是等本地博客搭建好之后也可以。

再探Hexo

新建文章： hexo new 编辑配置文件，关联远程仓库： 在编辑器中打开Hexo配置文件_config.yml，找到下面内容：

Deployment

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

deploy: type: 添加github仓库信息：

Deployment

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

deploy: type: git repo: git@github.com:SeayXu/seayxu.github.io.git #github仓库地址 branch: master # github分支 注意：type、repo、branch的前面有两个空格，后面的:后面有一个空格 安装git插件

npm install hexo-deployer-git –save 如果没有安装git插件，会有错误提示，安装后重新部署就可以了。 部署

hexo deploy 如果没有意外，部署就成功了，可以打开 http://<用户名>.github.io 查看。

hexo命令缩写

hexo g：hexo generate hexo c：hexo clean hexo s：hexo server hexo d：hexo deploy hexo命令组合

hexo clean && hexo g -s，就是清除、生成、启动 hexo clean && hexo g -d，就是清除、生成、部署 本文简单介绍Hexo的部署，接下来的文章会介绍Hexo的相关配置。

报错总结

ERROR Deployer not found: git 或者 ERROR Deployer not found: github

解决方法： npm install hexo-deployer-git –save

如发生报错： ERROR Process failed: layout/.DS_Store , 那么进入主题里面layout和_partial目录下，使用删除命令：

rm-rf.DS_Store

ERROR Plugin load failed: hexo-server

原因：

Besides,utilities are separated into a standalone module.hexo.util is not reachable anymore.

解决方法，执行命令：

sudo npm install hexo-server

执行命令hexo server，提示：Usage: hexo ….

原因：

我认为是没有生成本地服务

解决方法，执行命令：

npm install hexo-server –save

提示：hexo-server@0.1.2 node_modules/hexo-server

….

表示成功了参考

这个时候再执行：

hexo-server

得到:

INFOHexois running at http://0.0.0.0:4000/.PressCtrl+C to stop.

这个时候再点击http://0.0.0.0:4000，正常情况下应该是最原始的画面，但是我看到的是：

白板和Cannot GET / 几个字

原因：

由于2.6以后就更新了，我们需要手动配置些东西，我们需要输入下面三行命令：

npm install hexo-renderer-ejs –save

npm install hexo-renderer-stylus –save

npm install hexo-renderer-marked –save

这个时候再重新生成静态文件，命令：

hexo generate（或hexo g）

启动本地服务器：

hexo server（或hexo s）

再，点击网址http://0.0.0.0:4000OK终于可以看到属于你自己的blog啦，??，虽然很简陋，但好歹有了一个属于自己的小窝了。参考链接，本地已经简单的设置好了，但是现在域名和服务器都是基于自己的电脑，接下来需要跟github进行关联。

主题推荐

这里有大量的主题列表使用方法里面

都有详细的介绍，我就不多说了。

我这里有几款个人认为不错的主题，免去你们，一个一个的选了，欢迎吐槽我的审美，??

Cover- A chic theme with facebook-like cover photo

Oishi- A white theme based on Landscape plus and Writing.

Sidebar- Another theme based on Light with a simple sidebar

TKL- A responsive design theme for Hexo. 一个设计优雅的响应式主题

Tinnypp- A clean, simple theme based on Tinny

Writing- A small and simple hexo theme based on Light

Yilia- Responsive and simple style 优雅简洁响应式主题，我用得就是这个。

Pacman voidy- A theme with dynamic tagcloud and dynamic snow

一些基本路径

文章在source/_posts, 文章支持Markdown语法，可以使用一些MarkDown渲染工具。如果想修改头像可以直接在主题的_config.yml文件里面修改，友情链接，之类的都在这里。开始打理你的博客吧，有什么问题或者建议，都可以提出来，我会继续完善的。

修改头像

我当前的路径/Users/leopard/blog/themes/yilia，ls 你可以看到

Gruntfile.js _config.yml package.json

README.md layout source

vim _config.yml 进去，找到 #你的头像url avatar: 后接一个URL就行了，头像就修改成功了

修改主题和作者名字

我当前的路径/Users/leopard/blog，ls 你可以看到

_config.yml node_modules public source themes

db.json package.json scaffolds ssh-keygen

vim _config.yml 进去，找到 author: 潘柏信，修改成你自己的名字就行了

修改主题，然后继续往下找到

Extensions

Plugins: http://hexo.io/plugins/

Themes: http://hexo.io/themes/

theme:yilia

改成theme: yilia，theme:后面接你自己的主题名字就行了,然后分别执行

部署 hexo g

提交 hexo d

你的主题，和名字就修改成功了

hexo博客更换主题

第一步：选择主题

主题从哪里找呢？官方就有提供了一些 主题 ，可以从中选择。

官方提供的主题不少，可是并不一定有自己喜欢的或者又很难选择，这是个头疼的问题。

之前我的博客主题就是随便选了一个还算看的过去的。

但是再使用的过程中发现了一些问题：

不会自动生成目录 不能自动获取摘要 有很多配置不太方便 虽然有些问题，但并不影响整体使用，所以也没想去换主题了。

前端时间逛知乎，发现这样一个问题： 有哪些好看的 Hexo 主题？

查看第一名的答案，有个主题排行，发现排第一名的主题 next 。

然后点开主题看了一下，发现主题简约，配置详细，能够解决我之前存在的问题，于是就决定选择这个主题了。

第二步：安装主题

Hexo 有两份主要的配置文件（_config.yml），一份位于站点根目录下，另一份位于主题目录下。为了描述方便，在以下说明中，将前者称为 站点配置文件，后者称为 主题配置文件。

Hexo 安装主题的方式非常简单，只需要将主题文件放置于站点目录的 themes 目录下，然后修改下配置文件即可。具体到 NexT 来说，安装步骤如下。

下载 NexT 主题

下载NexT主题稳定版：

前往 NexT 版本 发布页面 选择你所需要的版本，下载 Download 下的 Source Code (zip) 到本地。 例如，下载 v0.4.0 版本： 解压所下载的压缩包至站点的 themes 目录下，并将 解压后的文件夹名称（ hexo-theme-next-0.4.0 ）更改为 next 启用NexT主题

克隆/下载 完成后，打开 站点配置文件，找到 theme 字段，并将其值更改为 next 。

验证主题是否启用

运行 hexo s –debug ，并访问 http://localhost:4000 ，确保站点正确运行。

第三步：配置

选择 Scheme

NexT 通过 Scheme 提供主题中的主题。 Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在 主题配置文件 中将 #scheme: Mist 前面的 # 注释去掉即可。

语言设置

编辑 站点配置文件，将 language 设置成你所需要的语言。

例如选用正体中文，则配置为：

language: zh-Hans 可用的语言如以下表格所示：

语言 代码 设定值 English en language: en 简体中文 zh-Hans language: zh-Hans French fr-FR language: fr-FR 正体中文 zh-hk/zh-tw language: zh-hk Russian ru language: ru German de language: de 菜单设置

菜单配置在 主题配置文件的 menu 。 若你的站点运行在子目录中，请将链接前缀的 / 去掉。默认支持的菜单项有：

键值 设定值 comment home home: / 主页 archives archives: /archives 归档页 categories categories: /categories 分类页（需手动创建） tags tags: /tags 标签页（需手动创建） about about: /about 关于页面 （需手动创建） commonweal commonweal: /404.html 公益 404 （需手动创建） 菜单示例配置：

menu: home: / archives: /archives

about: /about

categories: /categories

tags: /tags

commonweal: /404.html

侧栏设置

默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示。可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。

支持的选项有：

post - 默认行为，在文章页面（拥有目录列表）时显示 always - 在所有页面中都显示 hide - 在所有页面中都隐藏（可以手动展开） 侧栏示例配置：

sidebar: post 头像设置

编辑 站点配置文件，新增字段 avatar ， 值设置成头像的链接地址。

其中，头像的链接地址可以是：

地址 值 完整的互联网 URL https://avatars1.githubusercontent.com/u/32269?v=3&s=460 站点内的地址 /uploads/avatar.jpg - 需要将你的头像图片放置在 站点的 source/uploads/ （可能需要新建uploads目录） /images/avatar.jpg - 需要将你的头像图片放置在 主题的 source/images/ 目录下 头像设置示例：

编辑 站点配置文件，设置 author 为你的昵称。

站点描述设置

编辑 站点配置文件，设置 description 字段为你的站点描述。站点描述可以是你喜欢的一句签名:)

总结

到这里整个主题更换和配置就已经完成，现在可以看到博客已经成为预期的样子了。如果更换其它的主题，也大同小异，都是这三步，只是涉及到具体的配置就有些区别而已。

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上… 前言

hexo是一个基于Node.js的静态博客程序，可以方便的生成静态网页托管在github和Heroku上。作者是来自台湾的@tommy351。 我们可以用hexo创建自己的博客，托管到github或Heroku上，绑定自己的域名，用markdown写文章。 本博客即使用hexo创建并托管在github上。

网上有很多hexo大的搭建教程，这里就不多说了，这里主要介绍hexo的使用方法，同时也是为了方便自己记忆。

hexo命令

npm install hexo -g #安装 npm update hexo -g #升级 hexo init #初始化 简写

hexo n “我的博客” == hexo new “我的博客” #新建文章 hexo p == hexo publish hexo g == hexo generate#生成 hexo s == hexo server #启动服务预览 hexo d == hexo deploy#部署 服务器

hexo server #Hexo 会监视文件变动并自动更新，您无须重启服务器。 hexo server -s #静态模式 hexo server -p 5000 #更改端口 hexo server -i 192.168.1.1 #自定义 IP hexo clean #清除缓存 网页正常情况下可以忽略此条命令 hexo g #生成静态网页 hexo d #开始部署 监视文件变动

hexo generate #使用 Hexo 生成静态文件快速而且简单 hexo generate –watch #监视文件变动 完成后部署

两个命令的作用是相同的 hexo generate –deploy hexo deploy –generate

hexo deploy -g hexo server -g 草稿

1 hexo publish [layout] hexo new “postName” #新建文章 hexo new page “pageName” #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server） hexo deploy #将.deploy目录部署到GitHub hexo new [layout] title: 使用Hexo搭建个人博客 layout: post date: 2014-03-03 19:07:43 comments: true categories: Blog tags: [Hexo] keywords: Hexo, Blog description: 生命在于折腾，又把博客折腾到Hexo了。给Hexo点赞。 模版（Scaffold）

hexo new photo “My Gallery”

变量 描述 layout 布局 title 标题 date 文件建立日期 设置文章摘要

1 以上是文章摘要 以下是余下全文 创建一篇新文章

1 $ hexo new “my new post” 然后在~\hexo\source\ _posts中打开这个文件（我用的是subline text3打开的），配置开头。

title: my new post #文章标题，可以改为中文。 date: 2016-01-14 20:37:51 #发表日期，自动生成，不改。 categories: * #文章分类 tags:

这里是正文，用markdown写，所有的书写切记需要在 “ : “ 后面留空格。

在之前的内容会显示在首页，之后的内容会被隐藏，当游客点击Read more才能看到。

推送到服务器上

hexo n #写文章 hexo g #生成 hexo d #部署 #可与hexo g合并为 hexo d -g markdown语法

markdown语法，这里不做太多描述，有需要可以参考markdown 简明语法.我在这里记录一下我自己使用过程中经常用到的。

换行： 回车键或连续3个—表示分割线。 ———

强调： 星号（*）与下划线（_）都可以，单是斜体，双是粗体，符号可跨行，符号可加空格。 有序列表： 数字 + . + 空格 ，数字不能省略但可无序，点号之后的空格不能少。 超链接： 文字： 文字 ​图片： 图片名称 #我是放在本地文件夹下的，所以路径是：/img/Share project on github.png 插入代码： 新起一行，按2次Tab键或者8次空格。插入代码也可以加入有序列表。 或者

防止github中的READ.me文件被渲染的方法： 在~\Hexo\source文件夹下建立READ.md文件。 在~\Hexo\ _config.yml文件中skip_render:后面加上README.md即skip_render: README.md。 一些转义符： Markdown中的转义字符为\，转义的有：

\ 反斜杠 ` 反引号

rcxd01 commented 5 years ago

welcome