Mac下使用Hexo+Github搭建个人博客

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33489401/article/details/86561629

Mac下使用Hexo+Github搭建个人博客

hexo博客系统搭建

Hexo的介绍可以看看官方文档,说得很详细,简单的说就是一个博客框架。

1.Github账号注册及仓库创建

在这里插入图片描述
新建仓库

创建仓库的名字必须为username.github.io,我的用户名为Qreply,因此我创建的仓库就是Qreply.github.io,这是很关键的一点,很重要。输入名字后,直接点最下面绿色的按钮,创建新仓库。这一部分基本完成了,接下去需要在终端操作。

仓库名称

2.环境配置

·安装git、node.js和hexo

#首先检查是否安装了git和node.js,终端输入以下命令
node -v #是否出现安装版本信息,出现说明已经安装
git --version #同上述情况
如果没有安装,则进行安装
#通过homebrew安装
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install git
brew install node

·如果已经安装好了上述的软件,那么可以安装hexo,然后等待安装成功即可。

npm install -g hexo-cli

·创建blog文件夹,并初始化建立博客框架

# 在你的家目录下创建一个blog文件夹
mkdir blog
# 进入目录
cd blog
# 初始化目录
hexo init
开启本地服务 
# hexo s

出现以下信息,说明你可以本地访问博客系统,在浏览器输入4000这个网址,就可以看到博客首页。
在这里插入图片描述

在这里插入图片描述

3. 博客关联到Github仓库

在第一步的时候,我们已经将仓库创建好了,这里就需要用到了。

·首先我们要编辑图中_config.yml文件,这是博客的主要配置文件,在下面一部分,我们要频繁使用这个配置文件,这里先编辑一步,为了管理GitHub账号。
在这里插入图片描述
·打开文件之后,在文档最后,输入红色大框中的内容,只需要将你的username替换就可以了,其他无需更改。
在这里插入图片描述
·然后在目录中执行

# 产生静态网页
hexo g
# 部署到GitHub page上
hexo d

然后你需要输入你GitHub的用户名和密码,这样你就就可以使用你的仓库名去访问你的博客主页了。为了每一次部署不必一种输入密码,我们可以生成秘钥,然后提交到GitHub,进行关联,那么你下次就不需要再输入密码了。
·关联GitHub账号,免密提交

# 用你注册GitHub时的邮箱号,进行秘钥生成
cd ~
ssh-keygen -t rsa -C "[email protected]"
# 系统就会生成一个隐藏文件夹.ssh
cd .ssh
ls
# 复制公钥
vim id_rsa.pub

点击箭头的按钮,进入设置,然后点击SSH and GPG keys,创建新的SSH,将之前复制的公钥黏贴,提交,OK。

在这里插入图片描述
进入settings

在这里插入图片描述
在这里插入图片描述

4.博客的基本配置和发布新文章

1.一些基本配置可以在_config.yml中进行修改,如博客名、作者名等,另外如果你采用了别的主题,在主题文件夹中也会有一个_config.yml文件,可以在里面进行主题的一些修改。
2.发布新文章时,先执行以下命令:

hexo new post '文章标题'

这时在source->_posts文件下能看到新建的文章,是md格式,hexo支持markdown语法,我们可以用markdown编辑器进行编辑。
3.更新到github
我们每次做了修改后,都需要执行以下命令以更新github配置

hexo clean
hexo g
hexo d

5. 绑定个人域名

1)购买域名(我在腾讯云购买的域名)
2)域名解析
注册一个DNSPod账号,登录之后进入需要绑定的域名,在域名解析界面添加3条记录

@          A             192.30.252.153
@          A             192.30.252.154
www      CNAME         username.github.io.

如图所示:
在这里插入图片描述
3)配置hexo
新建一个名为CNAME的文件,无后缀,内容为你的域名地址。
将该文件放入本地博客的source文件夹里面,并更新到Github。hexo d -g
到这里就绑定域名成功了。

6.Hexo博客美化及功能增添

1)选主题
Hexo官网:https://hexo.io/themes/
里面有特别多的主题可以选择,我在这里选的是next这个主题。下载主题:

cd ~/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

·修改站点配置文件:_config.yml,将里面76行的theme由landscape修改为next
在这里插入图片描述
·更换新的主题,可能会有一些延迟

猜你喜欢

转载自blog.csdn.net/qq_33489401/article/details/86561629