0基础也能搞定！30分钟免费搭建个人网站全攻略
<p>你是否也曾想过拥有一个自己的网站，却被复杂的技术术语和步骤吓退？今天，我要分享一个超简单的方法，只需要30分钟，零代码基础也能免费搭建一个属于自己的个人网站！</p><h2 id="先搞懂两个核心工具github和hexo">先搞懂两个核心工具：GitHub和Hexo</h2>
<p>在开始动手前，咱们先来认识一下今天的两位主角：GitHub和Hexo。这两个工具就像一对黄金搭档，能帮我们免费搭建专业级别的网站。</p>
<h3 id="github不止是代码仓库更是免费的网站托管平台">GitHub：不止是代码仓库，更是免费的网站托管平台</h3>
<p>GitHub本质上是一个全球最大的代码托管平台，但它还有一个超实用的功能——<strong>GitHub Pages</strong>，可以免费帮你托管静态网站！</p>
<p>想象一下，GitHub就像一个免费的"网络存储空间"，你可以把你的网站文件放在这里，它不仅帮你保管，还会免费帮你"上线"，让全世界的人都能访问到。最棒的是，它还提供一个免费的二级域名（比如：username.github.io），连域名钱都省了！</p>
<h3 id="hexo写文章像记笔记自动生成精美网站">Hexo：写文章像记笔记，自动生成精美网站</h3>
<p>Hexo是一个博客框架，它的神奇之处在于：<strong>你只需要用Markdown写文章，它就能自动帮你生成一个漂亮的静态网站</strong>！</p>
<p>Markdown是啥？简单说就是一种超级简单的文本格式，用几个符号就能实现加粗、标题、列表等格式，比Word简单100倍！</p>
<p>Hexo的优点一大堆：</p>
<ul>
<li><strong>速度快</strong>：生成几百个页面只需要几秒钟</li>
<li><strong>超简单</strong>：安装配置几步搞定</li>
<li><strong>巨能打</strong>：支持各种炫酷功能和主题</li>
<li><strong>部署方便</strong>：一条命令就能发布网站</li>
</ul>
<h2 id="第一步注册github创建你的第一个仓库">第一步：注册GitHub，创建你的第一个仓库</h2>
<h3 id="-准备工作注册github账号">🚀 准备工作：注册GitHub账号</h3>
<ol>
<li>打开GitHub官网（https://github.com），点击右上角的"Sign up"注册账号</li>
<li>按照提示填写用户名、邮箱和密码，完成注册</li>
</ol>
<p><img alt="注册GitHub账号" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221905242-1512707821.png" class="lazyload"></p>
<h3 id="-创建网站专用仓库">✨ 创建网站专用仓库</h3>
<ol>
<li>登录成功之后，点击 GitHub 中的 New repository 创建新仓库</li>
</ol>
<p><img alt="创建仓库" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221905453-1112326786.png" class="lazyload"></p>
<ol start="2">
<li>填写仓库名称，这一步很关键，仓库名称必须是<code>你的用户名.github.io</code>（把"你的用户名"换成你刚注册的GitHub用户名），按照要求填写后点击创建即可</li>
</ol>
<p><img alt="填写仓库名称" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221905648-982465086.png" class="lazyload"></p>
<h2 id="第二步安装必要工具">第二步：安装必要工具</h2>
<h3 id="1-安装git代码管理好帮手">1. 安装Git：代码管理好帮手</h3>
<p>Git是一个代码管理工具，我们需要用它来把本地文件传到GitHub上。</p>
<ul>
<li>访问Git官网（https://git-scm.com/）下载对应系统的安装包</li>
</ul>
<p><img alt="下载Git" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221905960-1903901126.png" class="lazyload"></p>
<p><img alt="选择对应系统的安装包" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221906754-1575013298.png" class="lazyload"></p>
<p><img alt="选择对应版本的安装包" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221907035-914741470.png" class="lazyload"></p>
<ul>
<li>安装过程中全部选择默认选项即可</li>
</ul>
<p><img alt="安装Git" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221907275-977217178.png" class="lazyload"></p>
<h3 id="2-安装nodejshexo的发动机">2. 安装Node.js：Hexo的"发动机"</h3>
<p>Hexo是基于Node.js运行的，所以我们需要先安装Node.js。</p>
<ul>
<li>访问Node.js官网（https://nodejs.org/）下载LTS版本</li>
<li>安装过程中全部选择默认选项即可</li>
</ul>
<p>安装完成后，打开命令提示符（Windows）或终端（Mac），输入以下命令验证安装是否成功：</p>
<pre><code class="language-bash">node -v
npm -v
</code></pre>
<p>如果能看到版本号，就说明安装成功啦！</p>
<p><img alt="node版本号" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221907449-158897166.png" class="lazyload"></p>
<h2 id="第三步配置github-ssh密钥">第三步：配置GitHub SSH密钥</h2>
<p>这一步是为了让你的电脑能够"免密码"访问GitHub，省得每次传文件都要输入密码。</p>
<ol>
<li>打开Git Bash（安装Git后会有这个程序）</li>
<li>输入以下命令，设置你的Git信息（把"你的用户名"和"你的邮箱"换成你GitHub的用户名和邮箱）：</li>
</ol>
<pre><code class="language-bash">git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
</code></pre>
<ol start="3">
<li>输入以下命令，然后连续按三次回车键，即可生成SSH密钥</li>
</ol>
<pre><code class="language-bash">ssh-keygen -t rsa -C "你的邮箱"
</code></pre>
<ol start="4">
<li>找到生成的密钥文件：通常在<code>C:\Users\你的用户名\.ssh</code>目录下，有一个<code>id_rsa.pub</code>文件，用记事本打开<code>id_rsa.pub</code>文件，复制里面的全部内容</li>
</ol>
<p><img alt="复制密钥内容" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221907651-309997937.png" class="lazyload"></p>
<ol start="5">
<li>把密钥添加到GitHub</li>
</ol>
<ul>
<li>
<p>登录GitHub，点击右上角头像，选择"Settings"<br>
<img alt="选择Settings" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221907868-1375156420.png" class="lazyload"></p>
</li>
<li>
<p>左侧菜单选择"SSH and GPG keys"，点击"New SSH key"<br>
<img alt="新建密钥" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221908069-750905159.png" class="lazyload"></p>
</li>
<li>
<p>填写密钥标题（标题随便写），把复制的密钥内容粘贴到"Key"框里<br>
<img alt="添加密钥" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221908272-1445545271.png" class="lazyload"></p>
</li>
</ul>
<h2 id="第四步安装并初始化hexo">第四步：安装并初始化Hexo</h2>
<h3 id="1-安装hexo命令行工具">1. 安装Hexo命令行工具</h3>
<p>打开命令提示符（Windows）或终端（Mac），输入以下命令：</p>
<pre><code class="language-bash">npm install -g hexo-cli
</code></pre>
<h3 id="2-创建并初始化你的博客">2. 创建并初始化你的博客</h3>
<ol>
<li>选择一个你喜欢的文件夹（比如D盘），创建一个新文件夹（比如"MyBlog"）</li>
<li>打开命令提示符，进入这个文件夹：</li>
</ol>
<pre><code class="language-bash">cd D:\MyBlog
</code></pre>
<ol start="3">
<li>初始化Hexo博客：</li>
</ol>
<pre><code class="language-bash">hexo init 你的用户名.github.io
</code></pre>
<h3 id="3-本地预览你的博客">3. 本地预览你的博客</h3>
<p>输入以下命令，进入博客目录并启动本地服务器：</p>
<pre><code class="language-bash">cd 你的用户名.github.io
hexo s
</code></pre>
<p>然后打开浏览器，访问<code>http://localhost:4000</code>，你就能看到你的博客啦！是不是很神奇？<br>
<img alt="本地预览" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221908664-303675773.png" class="lazyload"></p>
<h2 id="第五步部署博客到github-pages">第五步：部署博客到GitHub Pages</h2>
<h3 id="1-配置部署信息">1. 配置部署信息</h3>
<p>用记事本打开博客目录下的<code>_config.yml</code>文件，找到最后面的<code>deploy</code>部分，修改成：</p>
<pre><code class="language-yaml">deploy:
type: git
repo: git@github.com:你的用户名/你的用户名.github.io.git
branch: main
</code></pre>
<h3 id="2-安装部署插件">2. 安装部署插件</h3>
<p>在命令提示符中输入：</p>
<pre><code class="language-bash">npm install hexo-deployer-git --save
</code></pre>
<div class="custom-container tip">
<p>hexo-deployer-git 插件是 Hexo 部署到 Git 仓库的核心工具，它的工作原理有两个重要特性：</p>
<ol>
<li>
<p><strong>无需项目根目录有 .git 文件夹</strong>：<br>
该插件会在部署时<strong>自动在 public 目录初始化一个临时 Git 仓库</strong>，即使你的 Hexo 项目根目录没有 .git 文件夹，也能正常将生成的静态文件推送到 GitHub。这意味着你可以将 Hexo 项目和生成的网站文件分开管理。</p>
</li>
<li>
<p><strong>只操作 public 目录</strong>：<br>
即使你的 Hexo 项目本身就是一个 Git 仓库（根目录有 .git 文件夹），<code>hexo d</code> 命令也只会<strong>关注 public 目录下的内容</strong>。它会将 public 目录中的文件作为独立的 Git 仓库进行操作，不会影响你项目根目录的 Git 历史。</p>
</li>
</ol>
<p>这就是为什么无论你的 Hexo 项目是否是 Git 仓库，都能通过 <code>hexo d</code> 命令轻松部署。</p>
</div>
<h3 id="3-一键部署">3. 一键部署</h3>
<p>输入以下命令，把你的博客部署到GitHub Pages：</p>
<pre><code class="language-bash">hexo clean # 清空 public 目录
hexo g # 生成静态文件到 public 目录
hexo d # 将已生成的 public 目录内容部署到 Git 仓库
</code></pre>
<p>稍等片刻，部署完成后，你就可以通过<code>https://你的用户名.github.io</code>访问你的网站啦！<br>
作为参考，你可以访问我的个人网站（同样通过 Hexo + GitHub Pages 搭建）：https://zmyai.github.io/</p>
<h2 id="第六步更换主题让你的网站更炫酷">第六步：更换主题，让你的网站更炫酷</h2>
<p>Hexo默认的主题比较朴素，我们可以换成更漂亮的主题。这里以"next"主题为例：</p>
<ol>
<li>输入以下命令，从github 克隆 next主题到themes/next文件夹中：</li>
</ol>
<pre><code class="language-bash">git clone git@github.com:next-theme/hexo-theme-next.git themes/next
</code></pre>
<ol start="2">
<li>修改 Hexo 的 _config.yml（站点配置文件，不是主题的 _config.yml）文件，把<code>theme</code>字段改成<code>next</code>：</li>
</ol>
<pre><code class="language-yaml">theme: next
</code></pre>
<ol start="3">
<li>复制主题配置文件：
<ul>
<li>找到<code>node_modules/hexo-theme-next/_config.yml</code>文件</li>
<li>把它复制到博客目录下的<code>themes</code>文件夹中（注意：不是<code>themes/next</code>目录）</li>
</ul>
</li>
<li>清除缓存并重新生成：</li>
</ol>
<pre><code class="language-bash">hexo clean && hexo g && hexo d
</code></pre>
<p>这里放上我自定义后的博客主题：</p>
<p><img alt="next主题" loading="lazy" src="https://img2024.cnblogs.com/other/1334115/202508/1334115-20250825221908929-1973904615.png" class="lazyload"></p>
<h2 id="可选将-hexo-项目源代码托管到-github">可选：将 Hexo 项目源代码托管到 GitHub</h2>
<p>如果想要将 Hexo 项目源代码部署到 GitHub 仓库，需要</p>
<ol>
<li>先将 Hexo 项目初始化为 Git 仓库</li>
<li>提交所有文件到本地仓库</li>
<li>添加远程仓库（注意：远程仓库是保存项目源代码的仓库，不是上面的<code>你的用户名.github.io</code>仓库，需要提前创建好）</li>
<li>推送本地仓库到远程仓库</li>
</ol>
<pre><code class="language-bash">git init # 将 Hexo 项目初始化为 Git 仓库
git add . # 添加所有文件到暂存区
git commit -m "Initial commit" # 提交所有文件到本地仓库
git remote add origin git@github.com:你的用户名/保存项目源代码的仓库名.git # 添加远程仓库
git push -u origin master # 推送本地仓库到远程仓库
</code></pre>
<h2 id="高级技巧1绑定独立域名">高级技巧1：绑定独立域名</h2>
<p>虽然GitHub提供了免费的二级域名，但如果你想更专业一点，可以绑定自己的域名。</p>
<h3 id="1-购买域名">1. 购买域名</h3>
<p>可以在腾讯云、阿里云等平台购买域名，价格通常在几十元一年。</p>
<h3 id="2-配置dns解析">2. 配置DNS解析</h3>
<p>登录你的域名提供商后台，添加两条DNS记录：</p>
<ul>
<li>A记录：主机记录<code>@</code>，指向<code>185.199.108.153</code>（GitHub Pages的IP地址）</li>
<li>CNAME记录：主机记录<code>www</code>，指向<code>你的用户名.github.io</code></li>
</ul>
<h3 id="3-在github设置域名">3. 在GitHub设置域名</h3>
<ol>
<li>在你的GitHub仓库中，点击"Settings" -> "Pages"</li>
<li>在"Custom domain"中输入你的域名，点击"Save"</li>
<li>在博客目录下创建一个<code>CNAME</code>文件（无后缀），里面写上你的域名</li>
<li>重新部署博客：</li>
</ol>
<pre><code class="language-bash">hexo clean && hexo g && hexo d
</code></pre>
<h2 id="高级技巧2使用更高级的markdown渲染器">高级技巧2：使用更高级的Markdown渲染器</h2>
<p>Hexo默认的Markdown渲染器功能有限，我们可以换成<code>hexo-renderer-markdown-it</code>，它支持更多Markdown语法和功能。</p>
<h3 id="1-卸载默认渲染器安装新渲染器">1. 卸载默认渲染器，安装新渲染器</h3>
<pre><code class="language-bash">npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-markdown-it --save
</code></pre>
<h3 id="2-安装必备插件">2. 安装必备插件</h3>
<pre><code class="language-bash">npm install markdown-it --save
npm install markdown-it-emoji --save # 表情符号
npm install markdown-it-mark --save # 高亮
npm install markdown-it-sub --save # 上标
npm install markdown-it-sup --save # 下标
npm install markdown-it-checkbox --save# 任务列表
npm install markdown-it-expandable --save# 折叠/展开内容
npm install markdown-it-container --save# 自定义容器
</code></pre>
<h3 id="3-配置渲染器">3. 配置渲染器</h3>
<p>修改博客目录下的<code>_config.yml</code>文件，添加以下配置：</p>
<pre><code class="language-yaml">markdown:
plugins:
- markdown-it-checkbox# 任务列表
- markdown-it-emoji# 表情支持
- markdown-it-expandable# 折叠/展开内容
- markdown-it-mark# 支持 ==高亮==
- markdown-it-sub # 下标（如 H~2~O）
- markdown-it-sup # 上标（如 x^2^）
</code></pre>
<h3 id="4-享受新功能">4. 享受新功能</h3>
<p>现在你可以使用更多高级Markdown语法了，比如：</p>
<ul>
<li>表情符号：<code>:)</code> 显示为 😃</li>
<li>下标：<code>H~2~O</code> 显示为 H<sub>2</sub>O</li>
<li>上标：<code>X^2^</code> 显示为 X<sup>2</sup></li>
<li>高亮：<code>==高亮==</code> 显示为 <mark>高亮</mark></li>
<li>任务列表：<code>- 已完成任务 - [ ] 未完成任务</code></li>
<li>折叠内容：使用<code>+++</code>包裹的内容可以折叠/展开</li>
<li>自定义容器：<code>::: tip</code> 可以创建提示框</li>
</ul>
<h2 id="总结">总结</h2>
<p>恭喜你！按照这个教程，你已经成功搭建了一个属于自己的个人网站。回顾一下，我们做了这些事：</p>
<ol>
<li>注册GitHub账号，创建网站仓库</li>
<li>安装Git和Node.js</li>
<li>配置SSH密钥</li>
<li>安装并初始化Hexo</li>
<li>部署网站到GitHub Pages</li>
<li>更换主题</li>
<li>将Hexo项目源代码托管到GitHub（额外保护你的项目代码）</li>
<li>学习了绑定独立域名和使用高级Markdown渲染器的技巧</li>
</ol>
<p>是不是比你想象的简单多了？现在，你可以开始在你的网站上写博客、分享知识、展示作品了。快去试试吧！</p>
<p>如果你在搭建过程中遇到问题，欢迎在评论区留言，我会尽力帮助你解决。</p>
<p>🚀 行动起来，拥有一个自己的网站，开启你的线上影响力之旅！</p>
<blockquote>
<p>本文由博客一文多发平台 OpenWrite 发布！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/zhaomy2025/p/19057831
頁:
[1]