0%

MacOS hexo + github 创建blog

一年前就创建了博客,一直没有记录内容。眨眼间一年多就过去了,翻看博客发现什么内容都没有,仿佛虚度了一年…其实很早前就想把创建博客的过程写下来,但是拖延症重度患者一直拖拖拖…就到了现在。记录一下吧,也避免之后再想写博客又忘记了怎么创建、怎么上传、怎么更新…(本来脑子就不好使,还总是想不起记录下来,我大概是没治了)

创建博客

环境配置

  1. 安装Node.js:
1
$ brew install node
  1. 安装Git:
1
$ brew install git

注册github账号、创建项目

注册github在此不表。

创建项目过程:

  1. 打开github,登录自己的账号。
    点击右上角➕号创建新项目。

  2. 在“Repository name”下填写自己的项目名称,如Aimyorcc.github.io。其中,github.io后缀必须有。

  3. 勾选Initialize this repository with a README,用来初始化项目。

  4. 点击Create repository创建项目。

  5. 点击Settings,然后在最后找到GitHub Pages,点击Choose a theme选择主题。然后再返回GitHub Pages,点击网页链接,查看自己的网页。

安装Hexo

  1. 在电脑合适的位置创建一个新的文件夹,用来存放博客相关的文件,如~\Desktop\blog

  2. 打开终端,进入博客所在文件夹:

    1
    $ cd ~\Desktop\blog
  3. 安装Hexo博客框架:

    1
    $ sudo npm install -g hexo-cli

    查看hexo是否安装成功:

    1
    $ hexo -v
  4. 初始化:

    1
    $ hexo init
  5. 安装必备组件:

    1
    $ npm install
  6. 生成静态网页:

    1
    $ hexo g  #same as "hexo generate"
  7. 开启hexo服务器:

    1
    $ hexo s  #same as "hexo server"
  8. 在浏览器中打开网址http://0.0.0.0:4000/可以查看本地博客网页。

将博客部署至github

添加ssh key到Github

检查ssh key是否存在

在终端执行如下命令(若id_rsa.pubid_dsa.pub存在,则直接将ssh key添加到github中)。

1
$ ls -al ~/.ssh

生成新的ssh key

执行如下命令生成ssh key(注意将your_name@example.com替换成自己的github注册邮箱):

1
$ ssh-keygen -t rsa -C "your_email@example.com"

默认会在~/.ssh路径下生成id_rsaid_rsa.pub

ssh key添加到github中

打开id_ras.pub文件,复制文件中的信息,然后粘贴到github的Add SSH key页面中。Add SSH key页面位置:Github页面--> Settings --> SSH keys --> Add SSH key
Title里任意添加一个标题,然后将ssh key粘贴进去即可。

在终端输入如下代码,若显示Hi your_name!则成功:

1
$ ssh -T git@github.com

修改配置文件

终端下进入blog文件夹下,打开_config.yml,在最底端将deploy修改为如下内容:

1
2
3
4
deploy:
type: git
repository: https://github.com/your_name/your_name.github.io.git
branch: master

your_name替换为自己的用户名。hexo 3.1.1版后,type值为git

  • 注意:在配置所有的_config.yml文件时(包括theme中的),在所有的冒号后都要添加一个空格,否则执行hexo命令会报错。

写文章、发布文章

安装git部署插件

1
$ npm install hexo-deployer-git --save

新建文章

1
$ hexo new post "article name"

~\blog\source\\_posts目录下可看到新出现的.md文件即为新文章,另外一个新文件夹为存放图片的文件夹。

发布到网页并上传到github

1
$ hexo g  #生成静态网页
1
$ hexo s  #本地预览效果
1
$ hexo d #上传到github

最后,打开your_name.github.io主页便可以看到新发布的文章。

参考

【超详细Hexo+Github博客搭建小白教程】

【GitHub Pages + Hexo免费搭建个人博客_Mac】

【mac 搭建基于Hexo-Github的Blog】

【Mac上搭建基于GitHub Page的Hexo博客】

【在vsCode中进行GitHub pages个人博客搭建】