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