Articles11
Tags0
Categories0

如何用Hexo和github搭建自己的博客

如何用hexo和github搭建自己的博客

1.在GitHub创建个人仓库

在GitHub中注册自己的账号后(用于注册的邮箱一定要验证),点击个人页面的New repository创建新仓库,此处注意:仓库名必须是自己注册时的用户名+.github.io

例如:用户名:example

那仓库名:example.github.io

(仓库创建成功后不会立即生效,需要等上一段时间)

2.安装git

从Git官网下载:

Git - Downloading Package–win
Git - Downloading Package–mac
Git - Downloading Package–linux

然后打开命令窗口(cmd)输入git -v,若有版本信息则是安装成功了。此时,右键的菜单里有Git Bash

3.将本地的Git与GitHub账号绑定

右键唤出Git Bash,设置用户名和邮箱

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

如果不是第一次使用git,可以通过cd ~/. ssh来检查本地已存在的ssh密钥

如果是第一次,(通过cd ~/. ssh会提示No such file or directory ),则选择生成密钥:

ssh-keygen -t rsa -C "邮件地址"

然后连续3次回车,最终会生成一个文件在用户目录下

复制里面的内容,打开你的github主页,进入个人设置 -> SSH and GPG keys -> New SSH key:

Title为标题,任意填即可,将刚刚复制的id_rsa.pub内容粘贴进去,最后点击Add SSH key。

在 Git Bash 中检测 GitHub 公钥设置是否成功,输入 ssh git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:

Hi Bitnut! You’ve successfully authenticated, but GitHub does not provide shell access.

如上则说明成功。

4.安装Node.js

Node.js下载地址:Download | Node.js

下载安装成功后,打开命令窗口cmd,输入node -v,如果有版本号,则安装成功了。

一般下载后默认装c盘,倘若装别的盘,在输入node -v后出现

'c' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

这应该是环境变量没有配置:环境变量配置:

https://www.jianshu.com/p/957f5631faa9

如果配置环境变量node -v还是保同样的错,则重启电脑(环境变量有时需要重启电脑才会生效)

5.安装Hexo

Hexo就是我们的个人博客网站的框架,这里需要自己在电脑常里创建一个文件夹。

注意不要在这个文件夹下面试用 Git 创建仓库,因为后面安装的主题内可能会带有 git 仓库,这样会导致包管理的混乱。

可以随意命名,这里命名为 Blog,Hexo 框架和以后我们自己发布的网页都在保存在这个本地文件夹中。创建好后,不需要进入文件夹中,在文件夹的父目录直接唤出 Git Bash。

使用npm命令安装Hexo,输入:

npm install -g hexo-cli

初始化我们的博客,输入:

hexo init Blog

注意,这里的命令都是作用在刚刚创建的Blog文件夹中。进入到文件夹中
查看一下我们的目录结构:

img

为了检测我们的网站雏形,分别按顺序输入以下三条命令:

hexo new test_my_site //创建新文章
hexo g//生成文件
hexo s//本地部署

这样我们在本地成功部署了我们的博客
打开浏览器输入地址:

localhost:4000

关于常用的hexo指令:

hexo n "我的博客" == hexo new "我的博客" //新建文章
hexo g == hexo generate //生成
hexo s == hexo server //启动服务预览
hexo d == hexo deploy //部署
hexo clean //清除缓存
hexo server -p 5000//更换端口

6.写博客

推荐使用Typora来编写博客,Typora支持使用HTML来编写带样式的文章,也支持插入不同语言的代码库。

利用Typora编写博客,生成后缀为.md的文件,将该文件放入你的刚刚创建的Blog文件夹中

(放置路径:Blog—source—_posts文件夹里面)

7.部署到Github上

打开Blog根目录的_config.yml文件配置(注意:不是子目录theme下的_config.yml文件):

img

repo可以写成:git@github.com:GitHub用户名/仓库名,保存该文件。

以上的所有操作其实是在给 hexo d 这个命令做相应的配置,让 hexo 知道你要把 blog 部署在哪个位置,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:

npm install hexo-deployer-git –save

完成后,我们分别输入三条命令:

hexo clean
hexo g
hexo d

第三条的 hexo d 就是部署网站命令,d是deploy的缩写。完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io 。其中的 xxxx 就是的GitHub用户名:

你就会发现你的博客已经上线了,可以在网络上被访问了。

  • 注意:如果你前面操作的很快,那么你到这一步有可能没法访问,因为github那边给你的网站部署需要花费一些时间,大概需要最长半个小时的时间。

8.hexo设置域名

购买域名:进入阿里云(也可以是别的域名购买平台),在首页搜索框输入你喜欢的域名(可以是任意名称,字符),在出来的搜索结果页选择合适价位的域名进行购买:

购买域名后需要进行实名认证,填写完自己的实名信息审核通过后,就可以进行域名解析。

进入控制台–域名控制台—进入域名解析列表,点击解析-添加记录。

img

这里添加2条记录:记录类型都是A,主机记录一条是@,一条是www,解析线路都是默认,记录值是你电脑ping 你的域名的地址,TTL写10分钟。

img

此时,还不可以用申请的域名访问博客,需要再hexo根目录创建CNAME文件,不带任何后缀,然后直接把你的域名信息,例如我的是zzjshuo.club,直接写在这个文件上,保存。

在 github 上面,打开 username.github.io 项目的(Settings)设置,然后在 GitHub PagesCustom domain设置里填上购买的域名。比如:

img

现在,你就可以通过这个域名访问Github博客了!

9.修改配置

在你的博客文件夹的根目录里面的_config.yml可以修改你的配置

例如,title:网站标题

​ author:你的名字

​ language:语言(en:英文,zh-tw:中文)

其他配置请参考官网:https://hexo.io/zh-cn/docs/configuration

10.更改主题

https://hexo.io/themes/中选择喜欢的主题,可以直接下载到本地博客文件夹---themes文件夹里,也可以通过Git Bash(这里选择主题:hexo-theme-yilia

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

git clone后是你的主题地址,这是将 yilia 主题下载到 Blog 目录的 themes 主题下的 yilia 文件夹中。

然后,打开站点的_config.yml配置文件,将里面的

theme:landscape

改为

theme:yilia

重新执行

hexo g

来重新生成。

11.关于Nexmoe主题的一些坑

Nexmoe是我自身使用的主题,关于这个主题的一些使用指南可以参考:https://docs.nexmoe.com/

下面是使用这个主题时遇到的一些坑儿

11.1 .md文件里面的代码块不要规定语言,否则代码块会出现序号的代码块分块的现象,很不好看

11.2如果想要你写的文章在首页是收起来的,点击标题跳到全文,则只需要在.md标题下面添加一句

<!--more-->

11.3 创建友情链接:

在站点根目录下的 source 文件夹内创建一个 .md 文件,文件名和路径根据个人喜好决定,会决定渲染生成以后页面的路径。

在文件中写入以下内容:

***
title: links
date: 2013/7/13 20:46:25
layout: py
permalink: PY.html
***

.md 中直接添加以下内容即可

 [![标题](https://example.com/logo.png)](https://example.com/ "标题")

11.4 友情链接的样式

添加头像下面的文字:在该主题的文件夹Nexmoe/source/js/app.js中修改:

$("#nexmoe-content img").each(function() {

  $(this).attr("data-src", $(this).attr("src"));

  $(this).attr("src", "");

  $(this).addClass("lazyload");

  $(this).attr("referrerPolicy", "no-referrer");
//添加span标签
  var spanElement = document.createElement("span");
//拿到alt中头像的名称
  var txt = $(this).attr('alt')
//插入spanElement中
  spanElement.innerHTML = txt;
//spanElement插入头像后面
  $(this).after(spanElement)

});



$("article:not(.nexmoe-py) img").each(function() {

  var element = document.createElement("a");

  $(element).attr("data-fancybox", "gallery");

  $(element).attr("href", $(this).attr("data-src"));

  $(this).wrap(element);

});

头像的样式:Nexmoe/layout/py.ejs中修改:

.nexmoe-py p{

      display: flex;

      flex-direction: row;

      align-items: center;

      justify-content: left;



    }

    .nexmoe-py p a{

      display: flex;

     flex-direction: column;

      align-items: center;

      justify-content: center;

     color:#000;

      margin-right:20px;



    }
    .nexmoe-py p a:hover{

     color:#ff4e6a;

      border: 1px solid #eeeeee

    }

    .nexmoe-py p a img{

      width: 120px;

      height: 120px;

      margin: 0 5px;

      background: cover;

    }

12.参考链接:

1.https://www.jianshu.com/p/860d3e0fff58

2.https://blog.csdn.net/wolf6699/article/details/78653547

3.https://www.cnblogs.com/xuwujing/p/7629965.html

4.https://www.cnblogs.com/penglei-it/p/hexo_domain_name.html

Author:shuo
Link:http://yoursite.com/2019/08/28/用hexo和githun搭建博客/
版权声明:本文采用 CC BY-NC-SA 3.0 CN 协议进行许可