实验：macOS+GitHub+Hexo+NexT=搭建个人博客

最新推荐文章于 2023-04-16 22:30:16 发布
最新推荐文章于 2023-04-16 22:30:16 发布
阅读量484 收藏 4
点赞数
分类专栏： GitHub
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linyonfeng/article/details/81260324
版权

一、本地环境准备

（一）命令行安装HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

打开 Terminal.app ，以普通用户身份粘贴上面这行代码；此过程需要保持网络畅通
这个过程中需要输入一次用户口令

（二）下载安装git

1、下载DMG镜像

https://git-scm.com/downloads
建议下载最新版本

2、通过dmg镜像安装git

双击 git-2.16.3-intel-universal-mavericks.dmg，然后双击打开窗口中的第一个pkg软件包
按照向导，选择标准安装

（三）下载安装node.js

1、下载pkg软件包

https://nodejs.org/en/
建议下载最新版本

2、通过pkg软件包安装node.js

双击 node-v10.1.0.pkg
按照向导，选择标准安装

（四）命令行安装Hexo

npm install hexo-cli -g

https://hexo.io/zh-cn/docs/
官方技术支持文档

二、创建本地站点

（一）注册一个GitHub账号

我的用户名：linyongfeng2018
访问链接：https://github.com/linyongfeng2018

（二）初始化站点目录

cd /Volumes/Docs/
hexo init linyongfeng2018.github.io
cd /Volumes/Docs/linyongfeng2018.github.io/
npm install

❕警告：
站点目录名必须遵守规范格式
username.github.io
原因是“这种命名方式涉及到GitHub Pages的命名规则”

（三）测试本地站点是否可以访问

1、启动本地hexo server服务

hexo server

2、浏览器访问测试

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，创建站点成功！

三、上传本地站点前的准备工作

（一）创建仓库（repository）

1、添加一个新的仓库

点击页面右上角的 加号 ，在下拉菜单中选择 New repository

2、仓库命名

仓库名前缀一定要和用户名一样！！！
linyongfeng2018.github.io

3、其他

其他地方不需要修改，直接 Create repository

（二）配置SSH key

1、创建密钥对

mkdir /Volumes/Docs/.ssh
ssh-keygen -t rsa -b 4096 -C 2578731631@qq.com

格式说明：
（1）ssh-keygen ：用来生成、管理和转换认证密钥，包括 RSA 和 DSA 两种密钥
（2）-t rsa ：指定密钥类型为 RSA
（3）-b 4096 ：指定密钥长度为 4096
（4）-C 2578731631@qq.com ：添加描述，后面跟“我的GitHub设置的邮箱”

2、第一次询问“保存密钥的路径”

第一次提示符：“Enter file in which to save the key (/Users/linyongfeng/.ssh/id_rsa): ”
默认是放到家目录下：/Users/linyongfeng/.ssh/
回车即可～

3、第二、三次询问“加密口令”

第二次提示符：“Enter passphrase (empty for no passphrase):”
回车即可～
第三次提示符：“Enter same passphrase again: ”
回车即可～

（三）导入私钥到本机系统

1、检查ssh-agent是否活跃

eval "$(ssh-agent -s)"

2、添加私钥到系统中

ssh-add  ~/.ssh/id_rsa

（四）上传公钥到GitHub设置

1、跳转到设置页面

点击页面右上角的 头像 ，在下拉菜单中选择 Settings

2、跳转到SSH key管理页面

在页面左侧找到 SSH and GPG keys 并点击跳转

3、SSH key上传入口

点击页面右上角的 New SSH key 按钮

4、查看自己创建的公钥文件的内容

cat ~/.ssh/id_rsa.pub |less

5、填写公钥

（1）Title：填写任意标题，比如 id_rsa.pub
（2）Key：粘贴 id_rsa.pub 文件的内容
（3）然后点击 Add SSH key 按钮

（五）设置仓库同步使用SSH

1、打开我的仓库列表页面

点击页面右上角的 头像 ，在下拉菜单中选择 Your profile 打开我的仓库列表页面

2、打开我的仓库页面

点击 linyongfeng2018.github.io 进入我的仓库页面

3、更改同步方式

在页面中间有 HTTPS/SSH 切换按钮，选择 SSH

4、拷贝同步地址

将 HTTPS/SSH 切换按钮右边的地址拷贝下来
git@github.com:linyongfeng2018/linyongfeng2018.github.io.git

（六）关联远程仓库

1、编辑本地站点根目录下的 站点配置文件 /_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml

默认调用 Sublime Text 3 打开此文档

2、修改Deployment设置

修改 站点配置文件 内容的最后一个段落

# Deployment
## Docs: https://hexo.io/docs/deployment.html
## 填写用于“发布站点”的配置
deploy:
    ## 使用什么方式来发布站点
    type: git
    ## 发布到哪个目的地
    repo: git@github.com:linyongfeng2018/linyongfeng2018.github.io.git
    ## 使用哪一个代码分支
    branch: master

四、推送本地站点到远程仓库

（一）第一步：清除旧的编译数据库

hexo clean

（二）第二步：重新编译站点

hexo generate

（三）第三步：安装缺失的工具（不安装则下一步会发布失败）

npm install --save hexo-deployer-git

（四）第四步：发布站点到 GitHub Pages

hexo deploy

输入：yes

（五）测试 GitHub Pages 是否可以访问

https://linyongfeng2018.github.io/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，推送站点成功！
恭喜！！！

五、添加NexT主题

（一）下载主题

cd /Volumes/Docs/linyongfeng2018.github.io/
git clone https://github.com/theme-next/hexo-theme-next themes/next

（二）启用主题

1、编辑本地站点根目录下的 站点配置文件 /_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml

默认调用 Sublime Text 3 打开此文档

2、修改theme设置

修改 站点配置文件 内容的Extentions段落

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
## 使用NexT主题；默认是landscap
theme: next

（三）验证主题

1、清除旧的编译数据库

hexo clean

2、重新编译站点

hexo generate

3、启动本地hexo server服务

hexo server

4、浏览器访问测试

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，添加NexT主题成功！

六、定制NexT主题

（一）切换Scheme

1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml

默认调用 Sublime Text 3 打开此文档

2、修改Scheme设置

修改 NexT主题配置文件 内容的Schemes段落

# Schemes
# 将需用启用的 scheme 前面注释 # 去除即可；此处启用Pisces
#scheme: Muse
#scheme: Mist
#推荐使用Pisces，双栏Scheme，正常显示用户头像
scheme: Pisces
#scheme: Gemini

可以通过在Sublime Text中按 Command+f 输入关键词 scheme 然后直接按4次 Command+g 找到这个段落

说明

scheme名称style风格简要介绍
Muse默认Scheme黑白主调，大量留白
MistMuse的紧凑版本整洁有序的单栏外观
Pisces双栏Scheme小家碧玉似的清新

3、测试修改是否生效

cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，Scheme切换成功！

（二）设置站点语言

1、编辑本地站点根目录下的 站点配置文件 /_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open _config.yml

默认调用 Sublime Text 3 打开此文档

2、修改Site设置

修改 站点配置文件 内容的Site段落

# Site
title: 攻城狮@疯子峰的博客
subtitle:
description:
keywords:
author: 攻城狮@疯子峰
language: zh-CN
timezone:

3、测试修改是否生效

cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，站点语言设置成功！

（三）设置页面菜单

1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml

默认调用 Sublime Text 3 打开此文档

2、修改menu设置

修改 NexT主题配置文件 内容的menu段落

menu:
  home: / || home
  about: /about/ || user
  categories: /categories/ || th
  archives: /archives/ || archive

可以通过在Sublime Text中按 Command+f 输入关键词 menu 然后直接按4次 Command+g 找到这个段落

说明

键值设定值显示文本对应图标
homehome: /主页home
aboutabout: /about/关于user
categoriescategories: /categories/分类th
archivesarchives: /archives/归档archive

3、打开NexT主题目录下的 语言翻译配置文件 /themes/next/languages/zh-CN.yml

cd /Volumes/Docs/linyongfeng2018.github.io/themes/next/languages/
open zh-CN.yml

4、设置菜单项的显示文本

修改 语言翻译配置文件 的menu分支

menu:
  home: 首页
  about: 关于
  categories: 分类
  archives: 归档
  search: 搜索

5、测试修改是否生效

cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，页面菜单设置成功！

（四）设置页面侧栏

1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml

默认调用 Sublime Text 3 打开此文档

2、修改menu设置

修改 NexT主题配置文件 内容的sidebar段落

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  #position: left
  position: right

可以通过在Sublime Text中按 Command+f 输入关键词 sidebar 然后直接按7次 Command+g 找到这个段落

3、测试修改是否生效

cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，页面侧栏设置成功！

（五）设置用户头像

1、编辑本地站点根目录下的 NexT主题配置文件 /themes/next/_config.yml

cd /Volumes/Docs/linyongfeng2018.github.io/
open themes/next/_config.yml

默认调用 Sublime Text 3 打开此文档

2、修改menu设置

修改 NexT主题配置文件 内容的avatar段落

# Sidebar Avatar
avatar:
  # in theme directory(source/images): /images/avatar.png
  # in site  directory(source/uploads): /uploads/avatar.png
  # You can also use other linking images.
  url: /images/avatar.png
  # If true, the avatar would be dispalyed in circle. 
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: false

可以通过在Sublime Text中按 Command+f 输入关键词 avatar 直接看到这一个段落

注意

头像的存放路径：
/Volumes/Docs/linyongfeng2018.github.io/themes/next/source/images/avatar.png

如需替换头像，请使用与 avatar.png 一模一样的文件名和后缀

cd /Volumes/Docs/linyongfeng2018.github.io/themes/next/source/images/
rm avatar.gif
cp ~/Desktop/avatar.png .

3、测试修改是否生效

cd /Volumes/Docs/linyongfeng2018.github.io/
hexo clean;hexo generate;hexo server

http://localhost:4000/
将上面的链接复制粘贴到浏览器地址栏并回车
如果页面能够正常显示，说明上面的步骤没有问题，用户头像设置成功！

「已注销」
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
macOS下搭建基于hexo框架的个人博客
codeWarmwood的博客
07-06 185
title: macOS下搭建基于hexo框架的个人博客 date: 2021-07-05 04:03:32 tags: 第一步：下载node.js 1、输入nodejs.org,下载首页的jts文件，点击安装。 2、打开终端，输入sudo su切换到root，依次输入node -v和npm -v 查看版本信息，有就说明安装好了。 第二步：使用npm安装hexo博客框架 1、由于npm使用国外源下载hexo速度可能会很慢，所以先换成国内阿里巴巴的镜像源。 (挂了VPN的直接下载:npm ins.
如何搭建个人博客网站(Mac)
chenhui3831的博客
07-17 345
一直以为自己记忆力很好，毕业之后才发现，之前需要看一遍就能记住的东西，现在看两三遍才能有印象。而搞技术的，如果不及时的记录下当时的情景，过后很容易就忘记。所以，再次萌生了搭博客、写文章的想法（之前用Discuz模板搭过一个论坛，后来忙的废掉了）。 本文介绍如何搭建个人博客网站，网站有空间、程序...
Mac上基于Github搭建Hexo博客
weixin_34050427的博客
12-06 110
原本有一个Hexo博客，图床托管在七牛云上，由于七牛云域名回收，导致图片都不可用，自己也有对文章重新精简的想法，于是废弃了另一个博客，重新搭建了现在的博客。如今Next主题也已更新到V6.6.0，相对于以前版本，有较大的改动，这里重新记录下搭建的过程。 什么是Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的...
github个人博客（hexo+next）
5431的专栏
04-17 1204
已经做完了，直接看 我的博客: http://fk5431.com/引流 引流 引流
MacOS利用Github搭建个人博客过程记录
m0_60880170的博客
09-06 818
详细记录搭建GitHub博客过程
pomdog：C ++ 20的开源游戏引擎
02-04
蓬狗 Pomdog是一种实验性游戏引擎，用C ++ 20或更高版本编写，是一种业余爱好。 它是开源的，并根据。反馈，问题和请求请求始终受到欢迎！ Bug和问题可以问题中提出。 如果您有任何疑问或功能要求，请随时在对我进行...
stella-engine：C ++ OpenGL 2D游戏引擎
02-04
斯特拉引擎 描述： 处于早期开发阶段的跨平台2D C ++ / OpenGL游戏引擎。...在GNU / Linux或MacOS X上构建示例： git clone --recursive https://github.com/stefandevai/stella-engine.git cd stella-engine
SUICo-Project:SwiftUI + Combine + GitHub
04-07
在SwiftUI、Combine和GitHub这三个技术的交汇点，我们可以构建出强大的现代iOS、macOS、watchOS或tvOS应用程序。这个名为"SUICo-Project"的项目正是围绕这一主题展开，利用苹果生态中的最新技术，实现高效、响应式的...
jumanpp：Juman ++（形态分析器工具包）
02-03
操作系统：Linux，MacOS X或Windows。 编译器：C ++ 14兼容 例如gcc 5.1 +，clang 3.4 +，MSVC 2017 我们在Linux / MacOS的GCC和clang，Windows的mingw64-gcc和MSVC2017上进行测试 CMake v3.1或更高版本 阅读了解...
Viry3D：C ++中的跨平台2D和3D游戏引擎
02-04
支持Android，iOS，macOS，Windows， UWP（Windows通用平台）， Web（基于WebAssembly）。邮箱： QQ交流群：428374717建立视窗Visual Studio 2017 CMake 3.10.2或更高gen_build_win.bat生成项目build超人Visual ...
hexo-theme-academia:根据Jekyll上的学术页面制作的Hexo学术网站上的轻便，简单和响应式页面
05-24
六主题性学术性 由Jekyll / academicpages设计的Hexo学术网站的简单页面。 介绍 这是对HEXO学术网站，从制作的光与简单和响应主题上化身。 非常感谢。 该主题仅采用Hexo中的post和page来显示您的信息。 对于学术页面，简单明了很重要。 示例页面： 准备 您需要的一些技能： 发布Hexo博客： 吉特 Markdown： 部署服务器（可选） 巴拉巴拉... 安装 最简单的安装方法是克隆整个存储库： git clone https://github.com/PhosphorW/hexo-theme-academia.git themes/Academia 一些必需的渲染器： npm install hexo-renderer-pug hexo-renderer-stylus --save 在hexo工作文件夹的_config.yml设置主题 t
个人博客搭建第一步：基础配置github+hexo+next
张猿的日常
01-02 327
系统环境 window10 专业版 一、准备安装 提前声明：本文所有内容参考了hexo官方文档，next主题官方文档以及网上众多大佬的教程，并由自己亲自尝试成功后记录下来。 注册一个github账号 注册完成后鼠标点击右上角的头像图标，然后在弹出的菜单里选择Your repositories，然后点击绿色按钮 new，在repository name那里填入仓库名字，比如：codewaster...
Github+hexo+next搭建教程
weixin_30758821的博客
11-15 259
今天参考的是大神的教程，学了一个新东西，但是可能由于原教程中运用的npm包与我当前使用的npm包版本不同的原因，有出过多处运行错误，但都在此教程中解决了; 总结了下命令： npminstallhexo -g 全局安装 hexo -v 查看当前版本 hexoinit初始化 hexoinstall 安装组件 hexo g生成加载页面 hexo s开启服务http:/...
杂谈 ｜ 在 macOS 上使用 Hugo + Coding 搭建个人博客
静心 Study
04-25 1010
文章目录前言旅途特色Quick Start一、Hugo 配置以及使用1. Hugo 下载安装2. 创建本地网站3. 下载喜欢的 Hugo Theme二、Coding 部署静态网站1. 准备生成要部署的静态网站2. 提交静态网页到 Coding参考资料 如果小川与赵高经历互换，小川能否初心依旧？赵高无愧于小川。 前言 最近各种技术交融，竟然有了一丝丝共鸣。???????????? 说不出来的酸爽无比。 玩个好玩...
GitHubPages+Hexo+nexT快速搭建个人博客
u013332124的专栏
06-13 646
​ 很早之前就想搭个自己的个人独立博客了,但是比较懒,自己又不擅长做前端页面，觉得做出来的页面太丑,所以一直拖着。之前的想法一直是自己开发,前端后端代码全包了。后来无意之间发现现在网上有很多种给非开发人员用的搭建博客的工具，如wordpress和hexo等。然后昨天心血来潮在网上找了几篇教程开始尝试搭建自己个人博客。废话不多说,直接开搞。 技术介绍 ​ 下面为搭建博客要用到的技...
从头开始搭建hexo+github+hexo-theme-next主题博客（基本设置）
qq_40930491的博客
02-24 720
参考博客：https://www.jianshu.com/p/b5495e551686 (把博客配置到github就不多说了，忘了可以看博客) 1：首先安装好hexo，git，npm等工具 2：新建一个文件夹（名字随便取，我的是blog-generator）,打开命令行进入新建的文件夹使用命令 hexo init   初始化文件夹完成后该文件夹中有如下文件/文件夹 其中 _...
Mac搭建Hexo博客及NexT主题配置优化
沉思的猿某人的专栏
07-20 8157
前言最近看到阳春面的博客，感觉非常漂亮，正好最近也想自己搭个博客，记录一下自己的学习经历和生活感悟，给自己留下点回忆，同时整理一下自己的思路，于是就想仿照着弄一个类似的静态博客网站，正好最近有时间，而且内心搭博客的念头越来越汹涌，所以，说干就干！主要内容拉到阳春面博客的最下方，发现他的静态博客是Hexo驱动，使用的NexT.Mist主题，而且我非常喜欢这个主题，所以我完全就是冲着阳春面的博客效果去的
macOS搭建GitHub hexo
YKorey的博客
05-31 381
工作也有好几年了，一直想着搭建一个属于自己的博客，刚好最近又一直听朋友说可以搭建一个hexo，了解了下，决定自己动手搭建一个，macOS版本的hexo（是在知道hexo搭建完之后，可以有一个属于自己的域名博客，我的兴趣就来了～～～哈哈哈），废话不多说，Action～～～ 这里只提macOS的搭建方法，Windows的等有空了，在公司电脑边搭建边记录～ 在搭建之前看了很多篇文章，每个人的搭建方法都差不多，大同小异，但是呢，多多少少还是会碰到一点bug，就是问题，难以解决的，所以，我决定，从官方...
MacOS下基于Github的Hexo博客搭建
最新发布
2301_77285173的博客
04-16 578
使用arm64 m1/m2芯片的mac电脑搭建Hexo博客，在跟着官方文档搭建的过程中，会遇到一些问题，研究重试了好久，现重新将步骤整理如下。首先可以参考，也可以直接根据本博客的步骤，很详细，适用于初学者。
2020年编程环境与软件工具全集：Linux+MacOS+Windows安装教程
这份文档由codesheep（绵羊哥）提供，主要关注的是基础环境的搭建，包括： 1. **环境声明与系统准备**：文档首先强调环境配置的重要性，确保读者在开始编程前有稳定的环境。无论是Linux、MacOS还是Windows系统，都...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值