Hexo博客搭建(三)上线与个性化域名设置

本文介绍如何使用GitHub Pages部署Hexo博客,并通过添加CNAME文件实现自定义域名的绑定,包括购买域名、设置DNS解析等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

与GitHub仓库互联

直到目前,我们的blog还只是一个本地的小家伙,像一个没有出过门的孩子,只能在localhost:4000里面查看。别人是看不到的。那么如何把它部署到线上?

一般建网站的都需要租服务器,买VPS,亚马逊,阿里云等等,还要花一笔小钱。

好在我们有GitHub。

GitHub提供里代码托管服务,作为全世界最大的程序员社区,自然不缺乏脑洞清奇的人,很多人在上面做各种各样的事情,这是后话。

如果是首次使用GitHub,配置过程是比较复杂的,可先看一下廖雪峰的git教程

假定我们已经配好了环境,那么就很容易了。

在GitHub上面新建一个repo,注意项目名称为 “用户名.github.io”否则之后是无法访问的,一个账户只能建一个github pages。之后将之前的public文件夹里的内容都同步到这个项目的master分支,之后浏览器访问用户名.github.io就能看到hexo的博客界面了。

比如我的repo 名字是

那我在浏览器地址栏输入 generalli95.github.io就可以访问我的网页了!

使用git 命令去push需要先hexo generate,还是略显麻烦,hexo提供了一个插件hexo-deployer-git可以打包git命令。

插件安装,命令行先cd到blog,然后输入下面命令。

npm install hexo-deployer-git --save

然后在博客的配置文件_config.yml,添加

注意:把repo:后面换成自己的repo名字!

然后hexo generate之后,再hexo deploy就可以自动部署了,支持短命令,hexo g -d,相当于前两个命令的合体!

换上自己的域名

得益于当年的中二岁月……申请github的时候非要起个什么英文名字,然后……自己都打不对自己的网页全名,因为实在是太长了?

所以,要不自己注册个域名,这样显得很酷炫,而且说不定哪天域名还能卖个好价钱,想想还真得好激动呢(白日梦)。

购买域名

购买域名的具体操作。推荐先看一下这篇文章: 推荐几家域名注册服务商
我是在Godaddy上注册的域名,网站有中文版支持支付宝支付还是很友好的。域名前两年有活动,前两年109块,后面每年100多一点,价格不贵。并且这可能也是我们这个博客搭建过程中唯一需要花钱的地方。

设置DNS解析

实际上这也不是一个必须的服务,但是由于Godaddy是一个国外厂商,直接使用它的DNS速度有影响,所以为了保证域名在国内的解析速度。推荐使用DNSPod的DNS解析服务。

DNSPod已经被腾讯云收购,所以用微信可以直接登录。
登录DNSPod之后按照提示,再到Godaddy里面把DNS修改一下。

然后为了使GitHub接收这个域名,还需要博客的根目录下添加一个名为CNAME的文件(不要加.txt)。
这个文件放到主题文件夹的source里面,文件里面放你的域名(去掉www),比如我的网站,文件里面就放一句话:liyaolife.com
然后在如上图所示界面里面,添加两条记录,一个主机记录写@,另一个写www,这样无论用户输入www.liyaolife.com 还是只输入 liyaolife.com 都可以直接定位到我的网站了,记录值放自己的GitHub Pages地址。

OK,现在可以把这个URL转到微信群里面跟爸爸妈妈还有小伙伴们炫耀一番了。


本文首发于个人网页Yao Blog,知乎专栏谈技术 不能潦草

<think>好的,用户想了解如何搭建个性化的个人博客。我需要分步骤解释,确保结构清晰,并且符合他们的系统级指令,比如正确使用LaTeX格式。首先,我应该考虑用户的需求,他们可能对技术细节不太熟悉,所以需要简明扼要,避免使用太多专业术语,但又要足够详细,让他们能够一步步操作。 首先,确定目标。用户可能希望明确自己建博客的目的,比如技术分享还是个人日记,这会影响后续的平台选择和内容规划。然后,选择平台,这里需要列举几个常见选项,比如WordPress、静态网站生成器(如Hugo、Hexo)和自建开发。每个选项的优缺点需要简要说明,帮助用户根据自己的技术水平和需求做出选择。 接下来是购买域名和主机。这部分可能需要解释域名和主机的基本概念,以及推荐一些服务商,比如阿里云、腾讯云。SSL证书的部分也很重要,现在很多网站都要求HTTPS,所以需要提到如何获取,比如Let's Encrypt。 然后是安装和配置平台。这里要分情况讨论,比如使用WordPress的一键安装,或者静态生成器的命令行操作。需要确保步骤清晰,用户能跟着做。同时,要提到主题和插件的选择,这对于个性化很重要。 设计个性化部分可能需要涉及主题修改,CSS/HTML的基础知识,以及自定义功能,比如评论系统或数据分析。这部分用户可能需要一些技术背景,但可以推荐一些工具或框架来简化操作,比如Bootstrap。 内容创作和管理需要强调结构化和SEO优化,这对博客的长期发展很重要。测试和上线部分要提醒用户检查不同设备和浏览器下的显示效果,以及备份和安全措施,避免数据丢失或被攻击。 最后,推广和维护也是关键,用户可能希望自己的博客被更多人看到,所以社交媒体分享和SEO技巧是必要的。维护方面,定期更新内容和检查安全性是持续发展的基础。 整个过程中,需要确保使用正确的LaTeX格式,虽然数学公式在搭建博客中可能用不到,但如果有涉及的地方,比如代码中的数学符号,需要正确使用$...$包裹。例如,如果有提到算法中的公式,如时间复杂度O(),要用$O(n^2)$。不过在这个主题下,可能用到的数学公式较少,但还是要保持警惕,确保符合系统指令。 需要检查是否有遗漏的步骤,比如是否提到了备份、安全性,或者是否需要解释静态网站生成器的工作原理。同时,确保语言口语化,避免生硬,让用户容易理解。最后,结构要清晰,分点说明,每个步骤有子步骤,帮助用户逐步实施。</think>### 如何搭建个性化的个人博客?分步指南 --- #### **1. 明确目标和需求** - **定位博客内容**:技术分享、生活记录、摄影展示等。 - **目标读者**:面向开发者、兴趣社群或公开访问。 - **功能需求**:是否需要评论、搜索、数据分析等。 --- #### **2. 选择博客平台** 根据技术能力选择合适方案: - **方案A:CMS工具(推荐新手)** - **WordPress**:功能丰富,插件多,支持自定义主题。 - **优点**:可视化操作,无需代码。 - **缺点**:需服务器和域名,动态网站速度较慢。 - **方案B:静态网站生成器(适合开发者)** - **工具**:Hugo(最快)、Hexo(易用)、Jekyll(GitHub原生支持)。 - **原理**:将Markdown文件生成HTML页面。 - **优点**:免费托管(如GitHub Pages)、速度快。 - **示例代码安装Hugo**: ```bash # 安装Hugo(Mac) brew install hugo # 创建站点 hugo new site my-blog ``` - **方案C:自建开发(完全定制化)** - **技术栈**:React/Vue前端 + Node.js/Django后端 + 数据库。 - **成本**:开发周期长,需维护服务器。 --- #### **3. 购买域名和主机** - **域名注册**:阿里云、腾讯云、Namecheap(年费约\$10)。 - **主机选择**: - **虚拟主机**:适合WordPress(年费约\$50)。 - **静态托管**:GitHub Pages/Vercel(免费)。 - **云服务器**:AWS/Aliyun(需自行配置,月费约\$5+)。 - **配置SSL证书**: - 使用Let's Encrypt免费证书,通过工具`certbot`一键部署。 --- #### **4. 安装并配置平台** - **WordPress示例**: 1. 通过主机控制面板(如cPanel)一键安装。 2. 登录后台选择主题(如Astra、GeneratePress)。 3. 安装插件(Yoast SEO、Jetpack)。 - **Hugo示例**: 1. 下载主题(如Ananke): ```bash cd my-blog/themes git clone https://github.com/theNewDynamic/gohugo-theme-ananke.git ``` 2. 修改`config.toml`配置: ```toml baseURL = "https://yourdomain.com" theme = "ananke" ``` --- #### **5. 个性化设计** - **修改主题样式**: - 通过CSS覆盖默认样式(如字体、配色)。 - 示例代码: ```css /* 修改标题颜色 */ h1 { color: #2c3e50; } ``` - **添加自定义功能**: - 集成评论系统(如Disqus、Utterances)。 - 添加Google Analytics跟踪访问数据。 --- #### **6. 内容创作管理** - **文章格式**:使用Markdown编写(语法简单,兼容性强)。 ```markdown ## 标题 **加粗文本**,[链接](https://example.com) ``` - **SEO优化**: - 每篇文章添加元描述(Meta Description)。 - 使用关键词工具(如Ahrefs)分析长尾词。 --- #### **7. 测试上线** - **本地测试**:运行`hugo server -D`预览效果。 - **跨设备兼容**:用Chrome DevTools检查响应式布局。 - **部署**: - 静态站点:推送到GitHub仓库并绑定域名。 - WordPress:通过FTP上传文件到服务器。 --- #### **8. 推广维护** - **推广渠道**:分享到社交媒体(Twitter/微博)、技术论坛。 - **定期更新**:保持内容频率(如每周1篇)。 - **备份策略**:使用插件(UpdraftPlus)或脚本自动备份。 --- ### 总结 搭建流程可抽象为: $$ \text{需求分析} \rightarrow \text{平台选择} \rightarrow \text{部署配置} \rightarrow \text{设计开发} \rightarrow \text{持续运营} $$ 按需选择工具,优先使用静态生成器(如Hugo)降低成本。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值