Mac 通过github + hexo 搭建个人博客

准备工作。

  • 个人博客如果希望拥有一个属于自己的独特网址，这就需要购买域名。域名可以通过域名供应商购买就可以，（比如:阿里 ） 我自己买了个.top的域名。10年150元不到，一般还是负担起的。。当然也不是非必需的，看个人需求了。

  • GitHub这个是零成本的，到官网注册个账号就可以使用了。这里我们需要创建一个仓库；

比如我的github账号为 zhangshan，那我的repository的名字如下：
zhangshan.github.io

创建新的仓库
注意名称
  • Node、git 环境需要准备好。
    查看我的版本，不一定非要和我一致，但版本不能太低了。
➜  ~ node -v
v14.14.0
➜  ~ npm -v
6.14.8
➜  ~ git --version
git version 2.24.1 (Apple Git-126)

安装Hexo

➜  ~ npm install -g hexo-cli

在安装过程中出现了个问题，搜索了下网上的解决方案。

....
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/opt/node-v10.16.0-linux-x64/lib/node_modules'
npm ERR!  { [Error: EACCES: permission denied, access '/opt/node-v10.16.0-linux-x64/lib/node_modules']
npm ERR!   stack:
npm ERR!    'Error: EACCES: permission denied, access \'/opt/node-v10.16.0-linux-x64/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
....

解决：

创建目录，用于存放npm 全局安装二进制执行文件

mkdir ~/.npm-global

配置npm以使用新的目录路径

npm config set prefix '~/.npm-global'

将目录加入环境变量中，打开~/.bash_profile文件，添加信息

 ~ open ~/.bash_profile

# 添加npm的相关信息
export NPM_GLOBAL=~/.npm-global/bin
PATH="/Library/Frameworks/Python.framework/Versions/3.8/bin:${PATH}:$M2_HOME/bin:$NPM_GLOBAL"
export PATH

完整配置截图：注意不要覆盖了你的配置文件。

配置

别忘了执行配置文件的生效更新操作

 ~ source ~/.bash_profile

然后我们在执行 npm install -g hexo-cli 命令安装即可。

安装完成后，我们需要在本地创建工作空间

# 指定本地文件夹路径：比如 /User/xxx/githbu/hexo/blogs
hexo init /User/xxx/githbu/hexo/blogs
cd /User/xxx/githbu/hexo/blogs
npm install

# 文件夹主要结构：
|---  node_modules
|---  scaffolds
|---  source
      |---  _drafts
      |---  _posts
|---  themes
|---  _config.yml
|---  package.json
|---  package-lock.json

说明：

  • _config.yml是博客网站的配置文件
  • source文件夹是存放用户资源
  • _post文件是存在markdown文件
  • theme文件夹是用来存放主题

Git的相关配置

# 设置全局github的用户名、邮箱地址
git config --global user.name "自己的github用户名"
git config --global user.email "自己的github注册邮箱"

# 创建公匙
# 执行命令后，会让填写相关信息，我们默认回车即可。
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

之后，会在~/.ssh/文件夹下创建密匙，即 ~/.ssh/id_rsa_pub ．复制文件下的全部内容
打开github添加ssh kye页面,点击＇New SSH key＇新建SSH key. 这里Title自己取，key就是~/.ssh/id_rsa_pub文件下的全部内容．

image.png

测试配置是否成功。

➜  ~ ssh git@github.com
PTY allocation request failed on channel 0
Hi suBoMan! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

将Hexo静态页面部署到Github

打开自己设置的Hexo的博客文件夹，打开　_config.yml文件，在最后添加以下内容：

# 配置hexo把blog部署到github仓库里
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

安装部署插件

npm install hexo-deployer-git --save

这时候，输入下面三条命令，完成最终部署．

hexo clean
hexo g
hexo d

➜  zhangshan-github hexo clean
INFO  Validating config
➜  zhangshan-github hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 167 ms
(node:9185) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:9185) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:9185) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:9185) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:9185) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:9185) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
INFO  Generated: archives/2020/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2020/12/index.html
INFO  Generated: fancybox/blank.gif
INFO  Generated: index.html
INFO  Generated: fancybox/helpers/fancybox_buttons.png
INFO  Generated: fancybox/fancybox_loading.gif
INFO  Generated: fancybox/fancybox_sprite.png
INFO  Generated: fancybox/fancybox_loading@2x.gif
INFO  Generated: fancybox/fancybox_overlay.png
INFO  Generated: fancybox/fancybox_sprite@2x.png
INFO  Generated: js/script.js
INFO  Generated: fancybox/jquery.fancybox.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.css
INFO  Generated: fancybox/helpers/jquery.fancybox-buttons.js
INFO  Generated: fancybox/helpers/jquery.fancybox-media.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.js
INFO  Generated: fancybox/helpers/jquery.fancybox-thumbs.css
INFO  Generated: css/style.css
INFO  Generated: 2020/12/04/hello-world/index.html
INFO  Generated: css/fonts/fontawesome-webfont.ttf
INFO  Generated: css/fonts/FontAwesome.otf
INFO  Generated: css/fonts/fontawesome-webfont.woff
INFO  Generated: css/fonts/fontawesome-webfont.eot
INFO  Generated: fancybox/jquery.fancybox.pack.js
INFO  Generated: fancybox/jquery.fancybox.js
INFO  Generated: css/images/banner.jpg
INFO  Generated: css/fonts/fontawesome-webfont.svg
INFO  28 files generated in 617 ms
➜  zhangshan-github hexo d
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
Initialized empty Git repository in /Users/zhangshan/devDocuments/zhangshan-github/.deploy_git/.git/
[master (root-commit) c239623] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 50cc69e] Site updated: 2020-12-04 14:42:53
 29 files changed, 5825 insertions(+)
 create mode 100644 2020/12/04/hello-world/index.html
 create mode 100644 archives/2020/12/index.html
 create mode 100644 archives/2020/index.html
 create mode 100644 archives/index.html
 create mode 100644 css/fonts/FontAwesome.otf
 create mode 100644 css/fonts/fontawesome-webfont.eot
 create mode 100644 css/fonts/fontawesome-webfont.svg
 create mode 100644 css/fonts/fontawesome-webfont.ttf
 create mode 100644 css/fonts/fontawesome-webfont.woff
 create mode 100644 css/images/banner.jpg
 create mode 100644 css/style.css
 create mode 100644 fancybox/blank.gif
 create mode 100644 fancybox/fancybox_loading.gif
 create mode 100644 fancybox/fancybox_loading@2x.gif
 create mode 100644 fancybox/fancybox_overlay.png
 create mode 100644 fancybox/fancybox_sprite.png
 create mode 100644 fancybox/fancybox_sprite@2x.png
 create mode 100644 fancybox/helpers/fancybox_buttons.png
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css
 create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js
 create mode 100644 fancybox/helpers/jquery.fancybox-media.js
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css
 create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js
 create mode 100644 fancybox/jquery.fancybox.css
 create mode 100644 fancybox/jquery.fancybox.js
 create mode 100644 fancybox/jquery.fancybox.pack.js
 create mode 100644 index.html
 create mode 100644 js/script.js
 delete mode 100644 placeholder
Enumerating objects: 46, done.
Counting objects: 100% (46/46), done.
Delta compression using up to 4 threads
Compressing objects: 100% (36/36), done.
Writing objects: 100% (46/46), 507.68 KiB | 1.67 MiB/s, done.
Total 46 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), done.
remote: This repository moved. Please use the new location:
remote:   git@github.com:zhangshan/zhangshan.github.io.git
To github.com:zhangshan/zhangshan.github.io.git
 * [new branch]      HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'git@github.com:zhangshan/zhangshan.github.io.git'.
INFO  Deploy done: git
# 本地访问：
➜ ～  hexo s
image.png
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容