基于Hexo+Github搭建个人博客

发表于2022-05-01|操作手册

|总字数:584|阅读时长:2分钟

引言

现在越来越多的人开始自建博客，搭建博客的工具也有许多。本篇文章就以hexo+github来搭建，希望能帮助到有需要的人。（注：本文中安装环境均为macOs）

Hexo安装

安装node.js

这步就不多说了，直接官网下载搞定

安装Hexo框架

博主的电脑是mac，所以直接在终端输入

$ sudo npm install -g hexo

初始化博客项目

$ hexo init blogname

启动Hexo服务

$ hexo s

此时在浏览器中打开http://localhost:4000 可看到以下界面表示安装完成

如果没有成功，可能是由于你的默认端口不是4000，可以修改一下端口再试试

hexo s -p 5000

创建Git远程仓库

注册GitHub账户

GitHub Pages是一个静态站点托管服务，可直接从GitHub上的存储库获取HTML，CSS和JavaScript文件，还可以选择在构建过程中运行这些文件并发布网站。

若已有GitHub账户可跳过此步骤

创建仓库

登录GitHub账号，新建名称为 你的用户名.github.io的仓库。假设我的GitHub账号的用户名是 hollowwwww，那么我就应该新建名称为 hollowwwww.github.io 的仓库。
其余字段填写随意。
点击Create Repository完成创建。

部署至Git

安装git插件

注意要在你的blog目录下安装

$ npm install hexo-deployer-git --save

修改站点配置文件

打开站点根目录下的_config.yml文件，找到deploy这一栏，做如下更改

deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

其中 username 替换成你自己的GitHub用户名

注意所有的 hexo 命令中的冒号 $:$ 后边都要加一个空格，否则执行时会报错，这是个坑，一定要注意

将本地项目推送到GitHub服务器

第一次部署时需要先配置git身份信息，其中的 yourname 和 youremail 都替换成你自己的用户名和邮箱

git config --global user.name "yourname"
git config --global user.email "youremail"

然后在blog目录下执行命令

hexo clean   //清理缓存
hexo g       //生成静态文件
hexo d       //部署网站到创建的仓库

完成以上几步，打开浏览器输入 username.github.io 就可以访问你的个人网站了

文章作者: Chanson

文章链接: https://www.chanson.cc/2022/05/01/begin-hexoblog/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Chanson！

相关推荐

Hexo访问加速(CDN)

前言笔者之前不是瞎搞了个旅行足迹地图吗，还乐此不疲的加上了图库链接跳转功能(详情可见之前文章:Hexo添加旅行足迹)。由于笔者把以前去过的大大小小的地方全都一股脑添加了进去，这下好了，图片资源直接爆满，哪怕已经使用工具将全站的图片统统压缩过一边了依旧庞大，再加上笔者的站点资源全放在Github Pages上，让本就不堪的访问速度直接奔溃了，老半天加载不出来，手机访问更是白屏，无奈整起CDN，特此记录常见加速类型 CDN（Content Delivery Network，内容分发网络）加速按类型可分为：静态资源加速（基础 CDN）图片、JS、CSS、静态 HTML、压缩包、安装包等可缓存资源；节点缓存，命中直接返回，极少回源。适合官网、图片、下载站。全站 / 动态加速（DCDN/ECDN）动态接口、PHP/JSP、登录、购物车、API 这类无法长期缓存的内容；靠智能路由、TCP 优化、协议优化、就近回源、路由优选，而不是靠缓存。适合电商、后台、小程序接口。点播加速（VOD） MP4、HLS 等点播视频，支持分片缓存、预加载、视频转码、防盗链。直播加...

Hexo添加旅行足迹

本文内容是基于 ECharts Version 6.1.0，低于此版本可能存在适配性问题准备Echarts JS文件首先在Echarts下载页下载echarts.min.js，然后还需要下载地图文件，笔者下载的是china.js和world.js，可用于中国地图和世界地图的制作。然后将以上几个JS文件都引入到你博客主题的JS文件夹中，以我在用的Butterfly主题为例，将文件添加进 /themes/butterfly/source/js 中即可由于相关法规问题，地图js文件目前官方下载渠道已关闭，需要自行寻找资源，笔者也不敢随便分享出来。不过信息时代，找点资源应该不是什么难事在Hexo中新建足迹页面如果你要将足迹页面作为一个单独的菜单入口放置在博客首页，那你需要像我一样在博客的source目录下新建travel目录(文件名可自取)，在travel目录中创建index.md文件，然后在你的主题的配置文件中新增导航栏设置 menu: 主頁: / || fas fa-home 時間軸: /archives/ || fas fa-archive 標籤: /tags/...

Hexo添加天气时钟

本次使用的插件来自hexo-butterfly-clock-veeink，天气服务由和风天气提供，以下是原文档内容这是基于hoochanlon/hexo-butterfly-clock-remake 项目修改而来的版本，新增高德地图 IP 定位支持适用于 Hexo + Butterfly 主题，提供实时天气、时间、城市自动定位等功能。功能特性以和风天气API为执行基础。通过IP定位API拿到城市位置，通过城市位置拿到和风天气location id 再通过location id获取到天气增加高德地图api方案安装插件 npm install hexo-butterfly-clock-veeink 修改配置文件在站点配置文件 _config.yml 或者主题配置文件 _config.butterfly.yml 中添加： # electric_clock# see：https://github.com/kitia01/hexo-butterfly-clock-veeinkelectric_clock: enable: true ...

Hexo版本升级记录

闲来无事给自己找点事做，把Hexo以及在用的butterfly主题都升级到最新了，特此记录以下指令均在hexo目录下操作定位到hexo博客目录，运行 hexo -v 查看当前版本 PS D:\HEXO\yourblog> hexo -vINFO Validating confighexo: 7.3.0 全局升级hexo-cli，运行npm i hexo-cli -g PS D:\HEXO\yourblog> npm i hexo-cli -g npm error code EPERMnpm error syscall unlinknpm error path D:\nodejs\node_modules\hexo-cli\LICENSEnpm error errno -4048npm error [Error: EPERM: operation not permitted, unlink 'D:\nodejs\node_modules\hexo-cli\LICENSE'] {npm err...

` const blob = new Blob([htmlSource], { type: 'text/html;charset=utf-8' }) const url = URL.createObjectURL(blob) window.open(url, '_blank', 'noopener') setTimeout(() => URL.revokeObjectURL(url), 5000) } const attachMermaidViewerButton = wrap => { let btn = wrap.querySelector('.mermaid-open-btn') if (!btn) { btn = document.createElement('button') btn.type = 'button' btn.className = 'mermaid-open-btn' wrap.appendChild(btn) } btn.innerHTML = '' if (!btn.__mermaidViewerBound) { btn.addEventListener('click', e => { e.preventDefault() e.stopPropagation() const svg = wrap.__mermaidOriginalSvg || wrap.querySelector('svg') if (!svg) return const initViewBox = wrap.__mermaidInitViewBox openSvgInNewTab({ source: svg, initViewBox }) }) btn.__mermaidViewerBound = true } } // Zoom around a point (px, py) in the SVG viewport (in viewBox coordinates) const zoomAtPoint = (vb, factor, px, py) => { const w = vb[2] * factor const h = vb[3] * factor const nx = px - (px - vb[0]) * factor const ny = py - (py - vb[1]) * factor return [nx, ny, w, h] } const initMermaidGestures = wrap => { // Clean up previous event listeners and pending frames if (wrap.__mermaidAbortController) { wrap.__mermaidAbortController.abort() if (wrap.__mermaidRafId) cancelAnimationFrame(wrap.__mermaidRafId) } const ac = new AbortController() wrap.__mermaidAbortController = ac const svg = wrap.querySelector('svg') if (!svg) return // Ensure viewBox exists so gestures always work const initVb = getSvgViewBox(svg) wrap.__mermaidInitViewBox = initVb wrap.__mermaidCurViewBox = initVb.slice() setSvgViewBox(svg, initVb) // Disable default gestures to prevent scroll chaining and pinch-zoom penetration in Chrome svg.style.touchAction = 'none' // Cache BoundingClientRect, throttled on scroll to reduce reflow let cachedRect = svg.getBoundingClientRect() let rectDirty = false const markRectDirty = () => { rectDirty = true } window.addEventListener('resize', markRectDirty, { signal: ac.signal }) window.addEventListener('scroll', markRectDirty, { signal: ac.signal, capture: true }) const getRect = () => { if (rectDirty) { cachedRect = svg.getBoundingClientRect() rectDirty = false } return cachedRect } // Precompute clamp bounds from initial viewBox const minW = initVb[2] * 0.1 const maxW = initVb[2] * 10 const minH = initVb[3] * 0.1 const maxH = initVb[3] * 10 const clampVb = vb => { const out = vb.slice() out[2] = clamp(out[2], minW, maxW) out[3] = clamp(out[3], minH, maxH) return out } // Throttle DOM updates using requestAnimationFrame let pendingVb = null let rafId = null const applyVb = () => { if (pendingVb) { wrap.__mermaidCurViewBox = pendingVb setSvgViewBox(svg, pendingVb) pendingVb = null } rafId = null wrap.__mermaidRafId = null } const setCurVb = vb => { pendingVb = clampVb(vb) if (!rafId) { rafId = requestAnimationFrame(applyVb) wrap.__mermaidRafId = rafId } } const state = { pointers: new Map(), startVb: null, startDist: 0, lastPointerX: 0, lastPointerY: 0 } const onPointerDown = e => { if (e.pointerType === 'mouse' && e.button !== 0) return svg.setPointerCapture(e.pointerId) const curVb = wrap.__mermaidCurViewBox state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }) if (state.pointers.size === 1) { state.startVb = curVb.slice() state.lastPointerX = e.clientX state.lastPointerY = e.clientY } else if (state.pointers.size === 2) { const pts = [...state.pointers.values()] const dx = pts[0].x - pts[1].x const dy = pts[0].y - pts[1].y state.startDist = Math.hypot(dx, dy) state.startVb = curVb.slice() } } const onPointerMove = e => { if (!state.pointers.has(e.pointerId)) return state.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }) const curVb = wrap.__mermaidCurViewBox const rect = getRect() if (state.pointers.size === 1 && state.startVb) { const p = state.pointers.values().next().value const dxClient = p.x - state.lastPointerX const dyClient = p.y - state.lastPointerY state.lastPointerX = p.x state.lastPointerY = p.y const dx = dxClient * (curVb[2] / rect.width) const dy = dyClient * (curVb[3] / rect.height) setCurVb([curVb[0] - dx, curVb[1] - dy, curVb[2], curVb[3]]) return } if (state.pointers.size === 2 && state.startVb && state.startDist > 0) { const pts = [...state.pointers.values()] const dx = pts[0].x - pts[1].x const dy = pts[0].y - pts[1].y const dist = Math.hypot(dx, dy) if (!dist) return const factor = state.startDist / dist const cx = (pts[0].x + pts[1].x) / 2 const cy = (pts[0].y + pts[1].y) / 2 const px = curVb[0] + (cx - rect.left) * (curVb[2] / rect.width) const py = curVb[1] + (cy - rect.top) * (curVb[3] / rect.height) setCurVb(zoomAtPoint(state.startVb, factor, px, py)) } } const onPointerUpOrCancel = e => { // Release PointerCapture to avoid event capture anomalies if (svg.hasPointerCapture && svg.hasPointerCapture(e.pointerId)) { svg.releasePointerCapture(e.pointerId) } state.pointers.delete(e.pointerId) if (state.pointers.size === 0) { state.startVb = null state.startDist = 0 } else if (state.pointers.size === 1) { const p = state.pointers.values().next().value state.lastPointerX = p.x state.lastPointerY = p.y } } const onWheel = e => { // Prevent event bubbling from triggering external scroll e.preventDefault() e.stopPropagation() // Normalize deltaY across deltaMode (Chrome uses pixels, Safari uses lines) let delta = e.deltaY if (e.deltaMode === 1) delta *= 16 else if (e.deltaMode === 2) delta *= 400 // Continuous zoom factor: smoother than fixed 1.1/0.9 steps const zoomFactor = Math.pow(1.001, delta) const curVb = wrap.__mermaidCurViewBox const rect = getRect() const px = curVb[0] + (e.clientX - rect.left) * (curVb[2] / rect.width) const py = curVb[1] + (e.clientY - rect.top) * (curVb[3] / rect.height) setCurVb(zoomAtPoint(curVb, zoomFactor, px, py)) } const onDblClick = () => { const init = wrap.__mermaidInitViewBox if (init) setCurVb(init) } svg.addEventListener('pointerdown', onPointerDown, { signal: ac.signal }) svg.addEventListener('pointermove', onPointerMove, { signal: ac.signal }) svg.addEventListener('pointerup', onPointerUpOrCancel, { signal: ac.signal }) svg.addEventListener('pointercancel', onPointerUpOrCancel, { signal: ac.signal }) svg.addEventListener('wheel', onWheel, { passive: false, signal: ac.signal }) svg.addEventListener('dblclick', onDblClick, { signal: ac.signal }) } const runMermaid = ele => { window.loadMermaid = true const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'neutral' ele.forEach((item, index) => { const mermaidSrc = item.firstElementChild // Clean up event listeners before removing old SVG if (item.__mermaidAbortController) { item.__mermaidAbortController.abort() } const oldSvg = item.querySelector('svg') if (oldSvg) oldSvg.remove() let config = {} try { config = mermaidSrc.dataset.config ? JSON.parse(mermaidSrc.dataset.config) : {} } catch (e) { console.warn('[mermaid] failed to parse dataset.config:', e) } if (!config.theme) { config.theme = theme } const mermaidThemeConfig = `%%{init: ${JSON.stringify(config)}}%%\n` const mermaidID = `mermaid-${index}` const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent const renderMermaid = svg => { mermaidSrc.insertAdjacentHTML('afterend', svg) if (true) initMermaidGestures(item) item.__mermaidOriginalSvg = svg if (true) attachMermaidViewerButton(item) } const handleError = err => { console.error(`[mermaid] render failed for block #${index}:`, err) const errorEl = document.createElement('div') errorEl.className = 'mermaid-error' errorEl.textContent = `Mermaid render error: ${err.message || err}` mermaidSrc.insertAdjacentElement('afterend', errorEl) } try { const renderFn = mermaid.render(mermaidID, mermaidDefinition) // mermaid v9 and v10 compatibility if (typeof renderFn === 'string') { renderMermaid(renderFn) } else { renderFn.then(({ svg }) => renderMermaid(svg)).catch(handleError) } } catch (err) { handleError(err) } }) } const codeToMermaid = $article => { const codeMermaidEle = $article.querySelectorAll('pre > code.mermaid') if (codeMermaidEle.length === 0) return codeMermaidEle.forEach(ele => { const preEle = document.createElement('pre') preEle.className = 'mermaid-src' preEle.hidden = true preEle.textContent = ele.textContent const newEle = document.createElement('div') newEle.className = 'mermaid-wrap' newEle.appendChild(preEle) ele.parentNode.replaceWith(newEle) }) } const loadMermaid = () => { const $article = document.getElementById('article-container') if (!$article) return if (false) codeToMermaid($article) const $mermaid = $article.querySelectorAll('.mermaid-wrap') if ($mermaid.length === 0) return const runMermaidFn = () => runMermaid($mermaid) btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid') window.loadMermaid ? runMermaidFn() : btf.getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaidFn) } btf.addGlobalFn('encrypt', loadMermaid, 'mermaid') window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid) })()

数据加载中