文章目录
简介
直接从hexo加github搭建blog具体步骤开始看即可
本来准备提供一些链接即可,后来有点混乱,有自己整理了一下,
本文中涉及的命令需要良好的网络,不要以为随便冒出信息就以为命令执行成功。
相关链接
-
可能需要的相关组件官网链接(
相关博文不理解的地方可以看一下对应文档,最好看一下,可以理解部分命令的含义
):
jekyll 中文文档 : https://www.jekyll.com.cn/
hexo : https://hexo.io/zh-cn/docs/
node.js 中文文档 : http://nodejs.cn/ 英文文档 :https://nodejs.org/en/ -
相关域名需要(应该会有默认的域名解析服务(不太高级))
阿里万网:https://wanwang.aliyun.com/
腾讯(好像一直在搞活动) :https://dnspod.cloud.tencent.com/?from=qcloudProductDns -
相关博文
利用git搭建个人的博客 : https://www.cnblogs.com/qianjilou/p/7381233.html
hexo + GitHub + git 搭建个人博客 : https://blog.csdn.net/edxuanlen/article/details/79154116
Jekyll搭建个人博客 :http://baixin.io:8000/2016/10/jekyll_tutorials1/
hexo搭建个人博客 : http://ibruce.info/2013/11/22/hexo-your-blog/?utm_source=tuicool / http://baixin.io:8000/2015/08/HEXO搭建个人博客/
域名申请和配置详情:https://blog.csdn.net/qq_20538515/article/details/83009145
超详细的建立个人博客指南:https://blog.csdn.net/grave2015/article/details/79961843
github pages介绍
github提供Github pages 功能(提供用户的展示页面)。
使用介绍官网地址 :https://pages.github.com/
github pages 的两种类型介绍 :https://www.cnblogs.com/liuzhi/p/8169255.html
github项目展示界面的介绍(中文版) : https://www.cnblogs.com/goweb/p/5460210.html
github个人展示界面(用于搭建博客): https://www.cnblogs.com/qianjilou/p/7381233.html
codding pages有相同的类似功能:https://coding.net/help/doc/coding-service/coding-pages-introduction.html
环境准备
1.node.js 下载(选择对应系统的版本) :https://nodejs.org/en/download/
2.git的下载:https://git-scm.com/download/win
3.github的账号的创建 :https://blog.csdn.net/qq_40182873/article/details/88016279#Git_93
4.hexo安装,使用安装命令,用git bash(windows中模拟linux环境)
主题切换
可以通过官网选定模板之后,到对应的github地址会有对应的文档说明,一般是在/themes/目录下的md文件中
官网主题模板介绍 :https://hexo.io/themes/
yelee主题的切换 : http://moxfive.coding.me/yelee/
相关博客 : http://moxfive.coding.me/
关于添加ssl的访问方式
启用强制HTTPS(小绿锁):https://blog.csdn.net/jave_f/article/details/80056501
部署类似于文档的模块
gitbook官网:https://www.gitbook.com/
gitbook使用教程 :https://www.jianshu.com/p/421cc442f06c
gitbook从懵逼到入门:https://blog.csdn.net/lu_embedded/article/details/81100704
GitBook部署Web接口文档:https://www.jianshu.com/p/1a1f6a97f394
gitBook安装使用文档:https://blog.csdn.net/zijie_xiao/article/details/51110983
gitbook和github pages 结合:https://www.jianshu.com/p/925745669c6c
教程:https://einverne.github.io/gitbook-tutorial/
自动配置 :https://www.jianshu.com/p/41478a0ea104
hexo加github搭建blog具体步骤
安装环境
上文中有环境准备有介绍,介绍一下安装hexo的命令,安装好Git后在git bash工具中执行,网络必不可少
npm install -g hexo
在此之前你需要有node.js环境,在官网下载安装包安装即可
生成blog目录,并实现本地访问
环境安装好了之后,一下命令在你需要搭建博客的目录执行,
1.确定建立博客的文件夹,该命令会为我们构建对应的hexo构建blog的目录结构
hexo init [folder]
如果下载不全会提示补全命令
npm audit fix
2.发布文章的命令,这部分可以看一下官方文档,命令主要是在对应的文件夹下创建.md,文件,根据layout的不同默认有草稿和新文章的区别,如果默认的layout表示为草稿的话,执行publish,转换为新文章。
hexo new [layout] <title>
hexo publish [layout] <title>
$ hexo new photo "My Gallery"
这里我们直接在source/_posts
中创建文章名称.md
文件即可,
第三个命令可以根据模板创建文件,有分类,标签,时间等属性的配置
,既Front-matter的配置
- 生成文章
hexo g
hexo 会为我们生成对应的css,js,和文章的html,具体生成的内容由配置的blog主题决定,生成的文件在public目录下
4.通过网络访问(本机)
hexo server
让后你就可以通过 http://localhost:4000 访问,可以通过 -p参数指定访问的端口
然后就会有将默认的文件在对应的blog样式中展现出。
博客主题切换
1.官网地址 :https://hexo.io/themes/
以上页面是官方的一些主题页面,点击后会进入对应的blog地址,在对应的blog界面找到作者的github地址,对对应的主题进行下载即可,一般会有对应的README.md文件教你如何安装主题
这是一个主题的详细使用文档 :http://moxfive.coding.me/yelee/
2.下载完成后在themes文件夹下会多出对应的主题目录,(下载到了其他地方复制过去即可)
然后在上层的_config.yml
文件中就配置使用的主题即可,
theme: shana
3.如果之前已经执行过hexo g
命令生成过对应之前主题的文件,那么需要执行下面的命令清楚之前生成的文件,然后再次hexo g
hexo clean
部署到github页面
- 创建git pages 页面对应的项目,上面有介绍地址,不赘述
- 配置ssh连接:不赘述(免密登录配置):https://blog.csdn.net/qq_40182873/article/details/88016279#Github__432
- 将github的地址配置到
_config.yml
文件中,在注解中对应的属性的配置都有对应的链接地址
deploy:
type: git
repository: git@github.com:cloudinwinter/cloudinwinter.github.io.git
branch: master
了解git的都知道,不赘述,这里的git地址是ssh地址
- 执行以下命令
hexo d
将生成的html,css,js以及相关文件提交到git仓库。大概相当于执行git push
的命令
这个命令的执行需要安装对应的hexo和git相关的插件
使用命令如下
npm install hexo-deployer-git --save
5.每次在对应的目录下添加了对应的文件执行hexo g -d
即可发布到github上。
添加新的文章
1.在上面意见介绍过了,source/_posts中创建
文章名称.md`文件。
2.hexo支持markdown,但是我们需要预览我们写的文章
我们可以用在线的或者可以下载的markdown编辑器
比如
1. 马克飞象(不确定格式是否兼容):https://maxiang.io/
2. typora 下载 :https://www.typora.io/
3. gitbook edit :https://legacy.gitbook.com/editor
4. 当然还有对应的一些在线的markdown编辑器,不同的系统也会有不同的编辑器,不说了
5. markdown的编辑器的语法(网上搜,很多)
1.https://www.jianshu.com/p/b03a8d7b1719
2.http://www.runoob.com/markdown/md-advance.html(菜鸟的markdown教程)
6.hexo 好像定义了对应的插入图片和其他的链接的语法,这里具体查看官方文档
3.文章上传不在赘述
文章的分类和标签的设定
文章的的标签和分类具体参考hexo的官方文档
官方:https://hexo.io/zh-cn/docs/front-matter
这个没试过,你们自己看吧
个人不是很熟悉啦,
在blog项目中添加接口文档(类似于书籍目录的都可以)
创建一个当前项目的空分支
- 创建一个存放文档目录(例如gitbook),克隆github项目,
切换至目录下
git clone git@github.com:cloudinwinter/cloudinwinter.github.io.git
- 切换到克隆下来的工作目录下,执行git创建新分支的命令(这里分支名称好像必须是这个,没搞明白)
git checkout --orphan gh-pages
这里的--orphan
是不在master的基础上新建分支(需要进行一次提交才可以用git branch命令查看对应的分支),执行完成后会切换分支
- 删除gh-pages分支的所有文件。
git rm -rf .
删除当前目录下的文件,直接在电脑上操作也可以,一般完成后只剩下.git文件
创建gitbook的目录(转自上文中提供的链接,部分内容查看原文)
1.安装gitbook,这个也是需要node.js环境的(新建一个对应书籍名称或者文档名称的目录)`
npm install -g gitbook-cli
2.初始化
gitbook init
会默认创建对应得文件夹
README.md
SUMMARY.md
为了更能体现gitbook的目录结构,我们更改一下默认生成的SUMMARY.md
文件的内容
转载一份如下
# 目录
* [前言](README.md)
* [第一章](Chapter1/README.md)
* [第1节:衣](Chapter1/衣.md)
* [第2节:食](Chapter1/食.md)
* [第3节:住](Chapter1/住.md)
* [第4节:行](Chapter1/行.md)
* [第二章](Chapter2/README.md)
* [第三章](Chapter3/README.md)
* [第四章](Chapter4/README.md)
- 生成书籍和网络访问
- 每次添加更改以上文件后,执行
gitbook init
命令,生成对应的目录结构,和其下的.md文件
gitbook build [书籍路径] [输出路径]
根据 .md文件在对应的目录下生成对应的HTML,js,css文件
$ gitbook serve --port 2333
这个命令包含了 git build 的过程,通过–port指定访问的端口
默认是http://localhost:4000/
具体会在_book目录下生成对应的html和css文件
实现gitbook在github pages上的访问
由于我们是直接在对应的git工作区初始化的,直接提交文件到对应的分支上即可。
1.将_book目录下的文件复制到(git工作区创建的对应书籍的目录)对应的文件夹下(如在git目录下新建javabook目录)
2.执行命令,将文件上传
git add [目录]
git commit -m "提交书籍"
3.推送书籍到远程仓库,由于我们是直接的克隆,不用执行git remote命令添加远程仓库地址,克隆下来的时候已经为其起了默认的本地别名origin
git push -u origin gh-pages
将其设置文默认的远程库,以后执行git push即可提交当前分支到远程库
分支名称好像不能变哦,否者访问可能不生效。
最终上一步无效,直接在hexo的目录的public目录下创建书籍的文件夹,将_book的内容复制到其中即可,然后hexo d命令发布到远程仓库。提交到主分支即可
书籍访问地址:https://cloudinwinter.github.io/Javatechnology/
blog访问地址:https://cloudinwinter.github.io/