博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Mac上基于Github搭建Hexo博客
阅读量:5965 次
发布时间:2019-06-19

本文共 5089 字,大约阅读时间需要 16 分钟。

原本有一个Hexo博客,图床托管在七牛云上,由于七牛云域名回收,导致图片都不可用,自己也有对文章重新精简的想法,于是废弃了另一个博客,重新搭建了现在的。如今Next主题也已更新到V6.6.0,相对于以前版本,有较大的改动,这里重新记录下搭建的过程。


什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

安装之前,首先得检查电脑里是否已将安装Node.js和Git。Node.js用来生成静态页面,Git用来将自己的博客内容提交到Github上。 如果电脑里已经安装了Node.js和Git,那么进入终端,执行npm命令:

$ sudo npm install -g hexo复制代码

如果你的电脑上没有安装所需要的程序,请查看和,根据步骤完成安装。已安装者可忽略。

安装Node.js

  安装Node.js最简单的方式就是下载来安装。

安装Git

  使用,或下载安装,如果你的电脑上装了Xcode的话,则无需安装,Xcode自带Git。

安装Hexo

  所有必备的应用程序安装完成后,可使用npm安装Hexo。

$ sudo npm install -g hexo复制代码

建站

  进入终端,cd到一个目录,执行:

$ hexo init blog复制代码

blog是你用来存放hexo文件的文件夹,cd到blog下,执行:

$ npm install复制代码

新建完成后,blog文件夹的目录如下:

_config.yml    // 站点的配置信息package.json   // 应用程序的信息scanffolds     // 模板文件夹source         // 存放用户资源的文件夹themes         // 主题文件夹,Hexo会根据主题生成静态页面复制代码

执行如下命令,启动本地服务器:

$ hexo s复制代码

当命令执行完成后,打开网址,看到下面的页面,那么Hexo就安装成功了

下一步,就开始关联Github。

关联Github

  首先得有一个Github账号,没有的话,请移步注册。

创建仓库

仓库名为固定写法:

  终端里cd到blog文件夹下,使用vim命令编辑_config.yml,滑到最底部,将deploy里的内容改为如下:

deploy:    type: git    repository: https://github.com/Rudy11111/Rudy11111.github.io.git  // 这个地方填写自己的仓库地址    branch: master复制代码

编辑完成后,按Esc键,输入:wq保存退出 执行如下命令生成静态页面:

$ hexo g复制代码
此时若出现如下报错:ERROR Local hexo not found in ~/blogERROR Try runing: 'npm install hexo --save'则执行命令:npm install hexo --save若无报错,请忽略复制代码

执行部署命令:

$ hexo d复制代码
若执行hexo d仍报错,则执行:$ npm install hexo-deployer-git --save复制代码

然后再次还行hexo g和hexo d命令 hexo d成功后终端会提示你输入Github的用户名和密码,输入完成后打开网址,就能看到和打开一样的界面。

为避免每次部署都需要输入Github用户名和密码,可以按以下步骤操作

步骤1 检查SSH keys是否存在Github

  执行如下命令,检查SSH key是否存在。如果有文件id_rsa.pub或id_dsa.pub,则直接进入步骤3将SSH key添加到Github中,否则进入下一步生成SSH key。

$ ls -al ~/.ssh复制代码
步骤2 生成新的SSH key

  执行如下命令生成public/private rsa key pair,注意将换成你自己注册Github的邮箱地址。

$ ssh-keygen -t rsa -C "your_email@example.com"复制代码

默认会在相应路径下(~/.ssh/id_rsa.pub)生成id_rsa和id_rsa.pub两个文件。

步骤3 将SSH key添加到Github中

  Find前往文件夹~/.ssh/id_rsa.pub打开id_rsa.pub文件,里面的信息即为SSH key,将这些信息复制到Github的Add SSH key页面即可。   进入Github –> Settings –> SSH keys –> add SSH key   Title里任意添一个标题,将复制的内容粘贴到Key里,点击下方Add key绿色按钮即可。

安装NexT主题

  博客显示的样式是由Next主题来控制,首先下载主题,并将主题下载到thems/next文件夹下,可以使用git命令:

# Next主题仓库已由https://github.com/iissnan/hexo-theme-next迁到https://github.com/theme-next/hexo-theme-next$ git clone https://github.com/theme-next/hexo-theme-next themes/next复制代码

你也可以在themes下建立一个next文件夹,然后将下载的NexT主题压缩包解压到next文件夹下

在blog目录下,使用vim命令编辑_config.yml,找到theme,修改为:

theme: next复制代码

需要注意的是,blog文件夹下会包含两个_config.yml,一个位于站点根目录下,也就是刚才创建的blog目录下,主要包含Hexo本身的配置;另一个位于主题目录下,主要用于配置主题相关的选项。

在_config.yml中修改配置信息

注意冒号后面一定要有空格

修改站点目录下的_config.yml(站点配置文件)
# Sitetitle: Rudy's Blog             # 站点标题subtitle:                      # 站点副标题description: 记录走过的痕迹       # 站点描述author: Rudy                   # 你的名字language: zh-Hans              # 站点语言 (之前版本为zh-CN)timezone:                      # 站点时区avatar:                        # 头像 (之前版本可以在此设置头像,现在需要去主题配置文件设置)复制代码
highlight:  enable: true  line_number: true  auto_detect: true  tab_replace:如果要使代码高亮,需要将auto_detect改为true,还可以选择高亮主题,修改主题目录下的_config.yml会提到复制代码
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: next# Deployment## Docs: https://hexo.io/docs/deployment.htmldeploy:  type: git  repository: https://github.com/Rudy11111/Rudy11111.github.io.git  branch: master  #主题和部署上面已经说过复制代码
修改主题目录下的_config.yml(主题配置文件)
menu:  menu:  home: / || home                       #首页  about: /about/ || user                #关于  tags: /tags/ || tags                  #标签  categories: /categories/ || th        #分类  archives: /archives/ || archive       #归档  #schedule: /schedule/ || calendar     #日程表  #sitemap: /sitemap.xml || sitemap     #站点地图  #commonweal: /404/ || heartbeat       #公益404  #menu用来设置菜单,我这个地方设置了5个菜单选项,分别是首页、标签、关于、分类和归档,不让显示的菜单选项可以用#注释掉,|| 后面是设置图标,图标来自于https://fontawesome.com/icons?d=gallery复制代码
# Schemes# scheme: Muse#scheme: Mistscheme: Pisces#scheme: Gemini#schemes用来设置你使用NexT的样式主题,以前只有3项,现在增加了Gemini项。Pisces样式文章布局比以前有所加宽。复制代码
# Code Highlight theme# Available values: normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: night eighties#highlight_theme用来设置代码高亮的主题(默认是normal)复制代码
# Automatically Excerpt. Not recommend.# Please use 
in the post to control excerpt accurately.auto_excerpt: enable: true length: 150 #这里用来设置是否显示[阅读全文],将enable改为true(默认是false),设置length的值来决定显示字符的长度,不过Hexo推荐使用
来设置(的确后者更好用,你想显示多少就显示多少),如果使用推荐的方式的话,那么enable得设置为false,以免冲突复制代码

主题_config.yml基本就只需要设置这么多,如果你想使自己的站点功能更为完善的话,会设置里面的其他一些选项,后续会讲到

Hexo和主题配置设置完后,我们现在来说说怎样写文章和发布文章

文章撰写和发布

  终端里cd到blog目录下,执行:

$ hexo new "FirstArticle"复制代码

这时会在blog/source/_posts目录下生成FirstArticle.md文件,尽量不要使用中文来命令,方便以后设置超链接跳转。vim命令可以编辑文章,不过我想你应该不会使用的,推荐使用,因为使用的是Markdown语法,所以你可以点击,还有,来简单学习一下Markdown的使用 编辑完成后,保存。在终端里依次执行:

$ hexo clean  // 清除缓存文件 (db.json) 和已生成的静态文件 (public)复制代码
$ hexo g     // 生成静态文件复制代码

如果你想在本地服务器上看一下效果,可以执行:

$ hexo s    // 启动本地服务器复制代码

打开网址,你就可以看到你写的文章了,当你修改文章时,不需要反复执行生成静态文件和启动本地服务器命令,直接保存修改的文章,然后刷新浏览器就可以看到修改后的文章了 将文章部署到Github上, 执行:

$ hexo d    // 部署网点复制代码

在浏览器中输入,如,这样你就能在站点上看到自己写的文章啦

Tips

转载于:https://juejin.im/post/5c08ea745188257a5a250d65

你可能感兴趣的文章
java中的重量级与轻量级概念
查看>>
Linux设备驱动工程师之路——硬件访问及混杂设备LED驱动
查看>>
进程和线程<一>
查看>>
远程算数程序——版本v1.0
查看>>
Mysql常见四种索引的使用
查看>>
说说Android桌面(Launcher应用)背后的故事(一)——揭开她神秘的面纱
查看>>
第一篇:zc706 开箱及开发环境搭建
查看>>
python-冒泡排序
查看>>
Mac下修改Hosts文件工具——Gas Mask
查看>>
协程函数应用
查看>>
CSU Double Shortest Paths 湖南省第十届省赛
查看>>
webgl像机世界
查看>>
php正则怎么使用(最全最细致)
查看>>
javascript数学运算符
查看>>
LC.155. Min Stack(非优化,两个stack 同步 + -)
查看>>
Add Two Numbers
查看>>
Asp.net技巧:gridview获取当前行索引的方法
查看>>
让 vim 在按ESC时自动保存
查看>>
git配置别名
查看>>
SpringMVC配置文件
查看>>