Github Pages + Hexo 建站图文教程 - Powered by Discuz! Archiver

首页 › Github/Gitee开源交流 › Github Pages + Hexo 建站图文教程

堆出于岸 發表於 2021-11-29 10:33:00

Github Pages + Hexo 建站图文教程

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
                     <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path>
               </svg>
               <blockquote>
<p></p>
<div class="toc">
<h4>文章目录</h4>
<ul><li><ul><li><font face="华文细黑" color="#CC3352">1. Github Pagses 服务</font></li><li><font face="华文细黑" color="#CC3352">2. 环境准备</font></li><li><ul><li><font face="华文细黑" color="#CC3352">2-1. 免安装 Hexo</font></li><li><font face="华文细黑" color="#CC3352">2-2. 安装 Git、NodeJs</font></li><li><font face="华文细黑" color="#CC3352">2-3. 配置 Git</font></li></ul>
</li><li><font face="华文细黑" color="#CC3352">3. Hexo 建站初始化</font></li><li><font face="华文细黑" color="#CC3352">4. Hexo Deploy 部署</font></li><li><ul><li><font face="华文细黑" color="#CC3352">4-1. 部署配置</font></li><li><font face="华文细黑" color="#CC3352">4-2. 生成文件并部署</font></li><li><font face="华文细黑" color="#CC3352">4-3. 访问服务</font></li></ul>
</li><li><font face="华文细黑" color="#CC3352">5. 博客个性化</font></li><li><ul><li><font face="华文细黑" color="#CC3352">5-1. 博文新建删除</font></li><li><font face="华文细黑" color="#CC3352">5-2. 个性化主题</font></li></ul>
</li><li><font face="华文细黑" color="#CC3352">6. line.mathAll is not function 报错</font></li></ul>
</li></ul>
</div>
<p></p>
</blockquote>
<h3><font face="华文细黑" color="#CC3352">1. Github Pagses 服务</font></h3>
<p>Github Pages 是一个免费的静态网页托管服务，您可以使用 Github Pagses 托管博客、项目官网等静态网页。<br> 登录 Github 并创建新仓库，名称格式为 <code>xxx.github.io</code>，xxx 为你的账户名，这个仓库会被识别为 Github Page 服务。我这里创建 niaonao.github.io 仓库。</p>
<blockquote>
<p>accountName.github.io 仓库名称命名格式为 <code>你的 Github 账户名+.github.io</code>, Github 会自动识别 github.io 为 Github Pages 服务。<br> Gitee 也支持 Gitee Pages 服务。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo 编译静态资源。</p>
</blockquote>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/ffdfff078710f0f35ab95007439b6690.png#pic_center" alt="在这里插入图片描述"><br> <img src="https://i-blog.csdnimg.cn/blog_migrate/51379c98cc139cb22407c148d837c0bc.png#pic_center" alt="在这里插入图片描述"></p>
<h3><font face="华文细黑" color="#CC3352">2. 环境准备</font></h3>
<p>安装 NodeJs、Git 工具。<br> 无需安装 hexo, 使用 npx 命令即可。</p>
<p>npx 是 npm(Node Package Manager) 引入的一个工具。优点免去了全局安装。</p>
<ul><li>临时安装可执行依赖包，不用全局安装，不用担心长期的污染。</li><li>可以执行依赖包中的命令，安装完成自动运行。</li><li>自动加载node_modules中依赖包，不用指定$PATH。</li><li>可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。</li></ul>
<p>npx 免全局安装 hexo, npm 从 5.2 版本增加了 npx 命令。</p>
<p>示例：<br> 查看 hexo 版本</p>
<pre><code class="prism language-xml">npx hexo -v
</code></pre>
<h4><font face="华文细黑" color="#CC3352">2-1. 免安装 Hexo</font></h4>
<p>hexo 官方文档: hexo.io/zh-cn/docs</p>
<p><code>重要：注意版本兼容，不兼容会导致命令执行报错</code></p>
<table><thead><tr><th>Hexo版本</th><th>最低兼容 Node.js 版本</th></tr></thead><tbody><tr><td>5.0+</td><td>10.13.0</td></tr><tr><td>4.1 - 4.2</td><td>8.10</td></tr><tr><td>4.0</td><td>8.6</td></tr><tr><td>3.3 - 3.9</td><td>6.9</td></tr><tr><td>3.2 - 3.3</td><td>0.12</td></tr><tr><td>3.0 - 3.1</td><td>0.10 or iojs</td></tr><tr><td>0.0.1 - 2.8</td><td>0.10</td></tr></tbody></table>
<p>免安装 Hexo，查看版本信息</p>
<pre><code class="prism language-xml">$ npx hexo -v
INFOValidating config
hexo: 5.4.0
hexo-cli: 4.3.0
os: win32 10.0.17134
node: 12.0.0
v8: 7.4.288.21-node.16
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.38.0
napi: 4
llhttp: 1.1.1
http_parser: 2.8.0
openssl: 1.1.1b
cldr: 34.0
icu: 63.1
tz: 2018e
unicode: 11.0
</code></pre>
<h4><font face="华文细黑" color="#CC3352">2-2. 安装 Git、NodeJs</font></h4>
<p>安装 Git (无版本要求)</p>
<pre><code class="prism language-xml">$ git --version
git version 2.18.0.windows.1
</code></pre>
<p>安装 Node.js 12.0.0 (考虑与 hexo 的版本兼容问题)<br><br> 历史版本下载地址: nodejs.org/dist/</p>
<pre><code class="prism language-xml">$ node -v
v12.0.0
</code></pre>
<h4><font face="华文细黑" color="#CC3352">2-3. 配置 Git</font></h4>
<blockquote>
<p>建站部署时需要推送文件到远程仓库，需要配置 Git 并连接到远程仓库。<br> 若已安装 Git 并连接到远程仓库，跳过该步骤即可。</p>
</blockquote>
<p>安装 Git，生成并配置私钥 id_rsa 连接上 ssh 。一般的，打开 Git Bash 能够成功连接代码托管平台即可，此处以 Github 为例，能够正常 clone 仓库，拉取推送提交代码即可。<br> 另外，通过<code>ssh -T</code>命令可在 Git Bash 测试是否连接成功</p>
<pre><code class="prism language-xml">Administrator@DESKTOP-OB9FR3E MINGW64 ~/.ssh/github
$ eval $(ssh-agent)
Agent pid 1107

Administrator@DESKTOP-OB9FR3E MINGW64 ~/.ssh/github
$ eval 'ssh-agent'
SSH_AUTH_SOCK=/tmp/ssh-lTvsTJJ3ANQQ/agent.1111; export SSH_AUTH_SOCK;
SSH_AGENT_PID=1112; export SSH_AGENT_PID;
echo Agent pid 1112;

Administrator@DESKTOP-OB9FR3E MINGW64 ~/.ssh/github
$ ssh-add id_rsa
Identity added: id_rsa (2469031115@qq.com)

Administrator@DESKTOP-OB9FR3E MINGW64 ~/.ssh/github
$ ssh -T git@github.com
Hi niaonao! You've successfully authenticated, but GitHub does not provide shell access.
</code></pre>
<p>Git 连接 ssh 可参考：Git 配置 SSH-Key 从远程存储库 clone 项目</p>
<h3><font face="华文细黑" color="#CC3352">3. Hexo 建站初始化</font></h3>
<p>WIN + R 进入命令行窗口，在路径 D:\workspace\customWeb 下执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。<br> Hexo 初始化命令 hexo init folder 会拉取 https://github.com/hexojs/hexo-starter.git 源文件。</p>
<pre><code class="prism language-xml">$ npx hexo init web
$ cd web
$ npm install
</code></pre>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/56800cfc8cf88ba48ca453d13935bcec.png#pic_center" alt="在这里插入图片描述"></p>
<p>文件说明</p>
<ul><li>_config.yml<br> 网站的配置信息，您可以在此配置大部分的参数。</li><li>package.json<br> 应用程序的信息</li><li>scaffolds<br> 模板文件夹，新建文章时，Hexo 会根据 scaffold 来建立文件。</li><li>source<br> 资源文件夹</li><li>themes<br> 主题文件夹，hexo 会根据主题来生成页面。</li></ul>
<p>更多配置: hexo.io/zh-cn/docs/configuration</p>
<p>静态文件生成后启动服务器</p>
<pre><code class="prism language-xml"># 清除上次生成的文件
$ npx hexo clean
# 生成文件
$ npx hexo generate
# 运行服务
$ npx hexo server
</code></pre>
<pre><code class="prism language-xml">$ npx hexo server
INFOValidating config
INFOStart processing
INFOHexo is running at http://localhost:4000 . Press Ctrl+C to stop.
INFOSee you again
</code></pre>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/19b47082dc6d9984a206448c8b7cfae3.png#pic_center" alt="在这里插入图片描述"></p>
<h3><font face="华文细黑" color="#CC3352">4. Hexo Deploy 部署</font></h3>
<h4><font face="华文细黑" color="#CC3352">4-1. 部署配置</font></h4>
<p>安装部署工具</p>
<pre><code class="prism language-xml">$ npm install hexo-deployer-git --save
</code></pre>
<p>修改部署配置 _config.yml</p>
<p>deploy.repo 配置托管仓库地址</p>
<pre><code class="prism language-xml">deploy:
type: git
repo: git@github.com:niaonao/niaonao.github.io.git
branch: master
</code></pre>
<h4><font face="华文细黑" color="#CC3352">4-2. 生成文件并部署</font></h4>
<p>然后重新生成文件并部署</p>
<pre><code class="prism language-xml">$ npx hexo clean
$ npx hexo genarate
$ npx hexo deploy
</code></pre>
<p>执行日志</p>
<pre><code class="prism language-xml">$ npx hexo clean
INFOValidating config
INFODeleted database.
INFODeleted public folder.

$ npx hexo g
INFOValidating config
INFOStart processing
INFOFiles loaded in 313 ms
INFOGenerated: archives/index.html
INFOGenerated: archives/2021/index.html
INFOGenerated: archives/2021/11/index.html
INFOGenerated: fancybox/blank.gif
INFOGenerated: fancybox/helpers/fancybox_buttons.png
INFOGenerated: index.html
INFOGenerated: fancybox/fancybox_loading.gif
INFOGenerated: fancybox/fancybox_sprite.png
INFOGenerated: fancybox/fancybox_sprite@2x.png
INFOGenerated: fancybox/fancybox_overlay.png
INFOGenerated: fancybox/fancybox_loading@2x.gif
INFOGenerated: js/script.js
INFOGenerated: fancybox/jquery.fancybox.css
INFOGenerated: fancybox/helpers/jquery.fancybox-media.js
INFOGenerated: fancybox/helpers/jquery.fancybox-thumbs.css
INFOGenerated: fancybox/helpers/jquery.fancybox-thumbs.js
INFOGenerated: fancybox/helpers/jquery.fancybox-buttons.js
INFOGenerated: fancybox/helpers/jquery.fancybox-buttons.css
INFOGenerated: css/fonts/fontawesome-webfont.eot
INFOGenerated: css/style.css
INFOGenerated: css/fonts/fontawesome-webfont.ttf
INFOGenerated: css/fonts/fontawesome-webfont.woff
INFOGenerated: fancybox/jquery.fancybox.pack.js
INFOGenerated: css/fonts/FontAwesome.otf
INFOGenerated: 2021/11/26/hello-world/index.html
INFOGenerated: fancybox/jquery.fancybox.js
INFOGenerated: css/fonts/fontawesome-webfont.svg
INFOGenerated: css/images/banner.jpg
INFO28 files generated in 1.31 s

$ npx hexo d
INFOValidating config
INFODeploying: git
INFOClearing .deploy_git folder...
INFOCopying files from public folder...
INFOCopying files from extend dirs...
warning: LF will be replaced by CRLF in 2021/11/26/hello-world/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/2021/11/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/2021/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in archives/index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/fonts/fontawesome-webfont.svg.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in css/style.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in index.html.
The file will have its original line endings in your working directory.
warning: LF will be replaced by CRLF in js/script.js.
The file will have its original line endings in your working directory.
Site updated: 2021-11-26 17:42:13
2 files changed, 2 insertions(+), 2 deletions(-)
Enumerating objects: 70, done.
Counting objects: 100% (70/70), done.
Delta compression using up to 4 threads.
Compressing objects: 100% (48/48), done.
Writing objects: 100% (70/70), 509.67 KiB | 1.30 MiB/s, done.
Total 70 (delta 9), reused 0 (delta 0)
remote: Resolving deltas: 100% (9/9), done.
To github.com:niaonao/niaonao.github.io.git
+ d6f6e29...2f76ec6 HEAD -> master (forced update)
Branch 'master' set up to track remote branch 'master' from 'git@github.com:niaonao/niaonao.github.io.git'.
INFODeploy done: git
</code></pre>
<h4><font face="华文细黑" color="#CC3352">4-3. 访问服务</font></h4>
<p>发布完成，访问 niaonao.github.io 可看到模板文件已更新到 github 托管仓库。</p>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/cf66178e21ecb2cf71801fab3cd4cb32.png#pic_center" alt="在这里插入图片描述"></p>
<p>此时已经通过 Git 部署到代码仓库 git@github.com:niaonao/niaonao.github.io.git</p>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/eac3430bcdbe33390d31e9c02cc4dc5e.png#pic_center" alt="在这里插入图片描述"></p>
<h3><font face="华文细黑" color="#CC3352">5. 博客个性化</font></h3>
<h4><font face="华文细黑" color="#CC3352">5-1. 博文新建删除</font></h4>
<pre><code class="prism language-xml">$ npx hexo new '第一篇博客'
INFOValidating config
INFOCreated:
</code></pre>
<p>会在相对路径 <code>\\source\\_posts</code> 下生成对应的 <code>\<title\>.md</code> 文件</p>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/b8b64af2d05b480e413ff2b9609dd06a.png#pic_center" alt="在这里插入图片描述"></p>
<p>通过 npx hexo new <title> 新建一篇博客，从 \source 下移除该文件重新部署发布即相对的删除了该篇博客。</p>
<h4><font face="华文细黑" color="#CC3352">5-2. 个性化主题</font></h4>
<p>主题：hexo.io/themes<br> 选择一款主题，点击跳转到资源托管平台，下载压缩文件解压缩到 \\themes 文件夹下，与默认主题 landscape 同级目录。</p>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/6fe2bc985ee52479869276fd4b7cec05.png#pic_center" alt="在这里插入图片描述"></p>
<p>在 _config.yml 修改配置即可</p>
<pre><code class="prism language-xml">theme: landscape
</code></pre>
<p>本地访问</p>
<pre><code class="prism language-xml">$ npx hexo clean | npx hexo generate | npx hexo server
INFOValidating config
INFOStart processing
INFOHexo is running at http://localhost:4000 . Press Ctrl+C to stop.
</code></pre>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/8925251daadb80039b7a80b15c1f3239.png#pic_center" alt="在这里插入图片描述"></p>
<p>部署发布<br> 在建站路径下右键打开 Git Bash，执行以下命令部署<br> 注意部署失败，请检查 Git 配置及分支是否正确，默认分支为 mster，注意更新 _config.yml 配置保持分支一致。</p>
<pre><code class="prism language-xml">$ npx hexo clean | npx hexo generate | npx hexo deploy
</code></pre>
<p>发布完成</p>
<p><img src="https://i-blog.csdnimg.cn/blog_migrate/5a905a657dbb37617ca0e08fd7a51721.png#pic_center" alt="在这里插入图片描述"></p>
<p>效果演示：niaonao.github.io</p>
<h3><font face="华文细黑" color="#CC3352">6. line.mathAll is not function 报错</font></h3>
<p>报错出现原因是 NodeJs 版本过低，建议使用 NodeJs 12.0.0 及以上版本。</p>
<blockquote>
<p>参考文章：hexo史上最全搭建教程<br> Hexo 常见问题解答：hexo.io/zh-cn/docs/troubleshooting<br> <font size="4" color="#CC3352">Powered By niaonao</font></p>
</blockquote><br><br>
来源：https://www.cnblogs.com/niaonao/p/19348763

頁: [1]

查看完整版本: Github Pages + Hexo 建站图文教程