域名+Hexo+gitHub = 你专属的独一 无二的博客

2020-04-10  本文已影响0人  沐雨立

域名+Hexo+gitHub的方式搭建博客,其实本质就是你的域名跟github服务器有个映射关系,本地在Hexo上写的.md格式的博文(其实读取的时候是静态网页)push到github上后,通过访问你的域名,就可以连接github的服务器,从而读取你的博文。我搭建的过程,大致可以粗略分为以下步骤:

创建GitHub仓库

进入github官网,没有账号的,注册一个咯 还能怎么办呢

Create New repository

注意:格式必须为xxx.github.io

1.jpg
配置SSH(可以直接https,不需要配置SSH)
ssh-keygen

生成id_rsa.pub文件,这里面就是SSH key的内容

然后使用vim编辑器打开这个文件

vim ~/.ssh/id_rsa.pub

选中内容 复制

在github的设置页面,新增SSH Key

2.jpg

查看SSH是否配置好

ssh -T git@github.com

本地环境搭建(以Mac示例)

安装git

戳我

或者戳我

安装Node.js

戳我

一步步安装就可以了,我们会把博客内容push到gitHub上,安装Node.js因为Hexo基于Node.js

安装和配置Hexo

Now,打开终端,用npm安装Hexo(Mac自带npm)

npm install -g hexo-cli

然后找个地方新建个文件夹,例如我建在用户目录下:

3.jpg

然后cd到Hexo文件夹

然后依次

hexo init
npm install

这一步如果出错的话,可能与权限有关,在前面加sudo 输入密码获得权限就行

安装结束后 空的文件夹现在长这样:

4.jpg

然后启动本地服务 (hexo server)

hexo s

5.jpg

打开上网工具,输入http://localhost:4000 是不是可以看到安装成功?嘤嘤嘤

那么我们看到的网页模板不是我们想要的,所以可以换主题嘛!这里是采用了比较著名的https://github.com/litten/hexo-theme-yilia主题

Ctrl+c

cd themes

把yilia主题从github网站上clone下来

git clone https://github.com/litten/hexo-theme-yilia.git

可以把文件夹改名字为yilia

6.jpg

然后打开Hexo文件夹下面的_config.yml文件,拉到最低,修改里面的themeyilia

ok 到这一步,我们完成了主题的切换

那我们一开始新建的gitHub仓库用来干什么的呢?别急,在下面

还是刚刚打开的_config.yml文件,拉到底,把配置改成下面这样:

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: master

注意看type: git 这里一定要写git而不是gitHub

好了,保存关闭

回到终端

执行命令

hexo clean
hexo g
hexo d

如果出现ERROR Deployer not found: git错误,执行npm install --save hexo-deployer-git还是不行看一下上文中type是否是git或者是否是权限问题,如果是,命令行前加sudo

配置域名

我是在阿里云买的域名(腾讯云,新浪云 etc.)

7.jpg

注意:记录值写一开始创建的github仓库名:xxx.github.io

到这里,完成了域名对github的映射

然后,去到github,完成github对域名的反映射

8.jpg 11.jpg

OK Nice!到这里就正式完成了 输入自己的域名,看到了属于自己独一无二的博客,是不是很惊喜?

发表文章

先说一下如果想在博文中插入图片,需要用到一个插件:

sudo npm install --save https://github.com/CodeFalling/hexo-asset-image

cd到Hexo 查看_config.yml文件 查找 post_asset_folder字段确定post_asset_folder设置为true

新建文章

cd Hexo

hexo new "Hello World"

然后在Hexo/source/_ports/里面可以看到Hello World.mdHello World文件夹,文件夹里可以放图片等跟Hello World博文有关的资源

在博文里用![] (/Hello World/tupian.png)方式插入图片

文章写好直接执行下面命令即可直接发布文章

hexo d -g

浏览器中输入自己的域名,便可以查看最新的博文了!Over!!!

碎碎念

博文可直接用MarkDown编辑器编辑,推荐Typora,真正的所写即所得

yilia 主题相关的设置,可打开/Hexo/themes/yilia/_config.ylm文件修改,详情可参照yiliagitHub主页

localhost:4000 端口被占用的话,可执行 hexo s -p 5000 修改成5000 端口

end of the stream or a document separator is expected at line x, column y

查看是否是_config.yml文件中x行冒号后面没有空格

9.jpg

解决方法:npm i hexo-generator-json-content --save(保证node在6.0版本以上)

如果出现

12.jpg

把层级改成下面这样:

10.jpg
上一篇 下一篇

猜你喜欢

热点阅读