Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处。 查看原文Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 “吾生也有涯,而知也无涯。” 都说每个做技术的人都应该有一个属于自己的博客网站,但是总是因为种种事情半途而弃,借着刚刚搭建完博客的热情写一下是如何搭建此博客的,其实现在搭建博客很简单,这套博客就是采用 Hexo + Github + Netlify 搭建的静态博客网站。 博客运行流程本地运行Hexo程序创建文章、程序修改等,将修改后的代码提交到GitHub,然后通过Netlify自动获取GitHub上的更新、部署、发布,这样就形成了一套自动更新部署发布的静态博客网站,下面让我一起来看一下是如何实现的。 Hexo Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。 安装 安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用程序,这里默认你会使用Git,如果不会请看廖雪峰老师的Git教程: Node.js,安装请参考文章Nodejs安装 Git,安装请参考Git安装 验证程序 Node.js验证:Windows系统打开cmd,然后输入node -v查看是否显示版本号,显示即表示安装成功,Mac和Linux则打开命令窗口同样验证即可。 Git验证:Windows系统在桌面右键看是否有Git bash here即可,打开后输入git验证,Mac和Linux则打开命令窗口输入git验证。 安装Hexo 如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm 即可完成 Hexo 的安装。 $ npm install -g hexo-cli 安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。就是你要将程序安装在所在文件夹的位置。 $ hexo init $ cd $ npm install 新建完成后,指定文件夹的目录如下: . ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes 然后在指定的文件内执行hexo server命令,然后访问 http://localhost:4000/ 即可访问本地已经部署好的Hexo网站。 $ hexo server INFO Start processing INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop. Hexo配置及使用 配置 在指定的文件内找到_config.yml配置文件,Hexo的配置都在_config.yml文件内,大部分说明可以查看官网Hexo配置,如下配置可根据需要自行更改。 网站 配置 说明 title 网站标题 subtitle 网站副标题 description 网站描述 author 你的名字 language 网站使用的语言,中文:zh-Hans 其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。 网址 参数 描述 默认值 url 网址 root 网站根目录 permalink 文章的 永久链接 格式 :year/:month/:day/:title/ 网站存放在子目录 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。 扩展 配置 说明 theme 当前主题名称。值为false时禁用主题 deploy 部署部分的设置 theme参数后期修改模板会用到,自己设置模板修改成对应参数。 使用 配置结束后让开始创建一片文章,使用命令hexo new [layout] 。如果没有设置 layout 的话,默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话,请使用引号括起来。hexo generate命令在<folder>/public文件夹下生成静态文件,该命令可以简写为hexo g。发表草稿命令hexo publish [layout] <filename>。 # 创建文件 hexo new HelloHexo # 生成静态文件 $ hexo generate # 发布文件 $ hexo publish HelloHexo # 启动服务 $ hexo server 启动服务后即可在<folder>/source/_posts文件下看到生成的HelloHexo.md文件,可以修改后即可刷新http://localhost:4000/查看最新内容,更多使用参考官网标签使用。 上传GitHub 在托管给GitHub之前先做一些准备工作,在<folder>文件下执行git init对git进行初始化,将对不需要上传的文件放入.gitignore文件中,使用命令echo "/public" >> .gitignore屏蔽public文件夹,然后提交所有文件。 # git 初始化 git init # 屏蔽 public文件夹 echo "/public" >> .gitignore # 添加到仓库 git add . # 提交文件 git commit -m "install hexo project" GitHub上创建远程仓库,选项都是默认即可。然后将<folder>文件夹与远程仓库绑定,绑定后提交文件到远程仓库。 # 绑定远程仓库,<your repo url>是指你远程仓库的ssh地址或者https地址 git remote add origin <your repo url> # 提交到远程仓库 git push origin master Netlify托管 什么是Netlify?Netlify是一家国外的静态网站的托管平台,提供免费的https,自动化部署和升级,可以监控GitHub、GitLab或者Bitbucket做到自动更新发布,是不是很赞!这也是为什么现在选择Netlify的原因,至于以后Netlify怎么发展只能再议。 走到现在就差最后一步,是不是有点小激动,接下来让我们Netlifyhttps://www.netlify.com/的官网,然后点击右上角Sign up注册账号,选择GitHub关联登录。 Netlify Sign up 注册后点击创建新站点,选择GitHub会有提示框进行认证。 Create a new site 选择上传到远程仓库的hexo项目文件,然后进行关联。 continue paoject 最后发布项目,这个时候点击deploy site按键,万事具备可以嗑会瓜子喝点茶水然后回来看一下应该就部署成功了。 deploy site 部署成功后即可生成一个https://xxx.netlify.com带有netlify的域名,这时候访问域名就可以看到一个属于自己的博客网站了,是不是激动的跳了起来。随机生成的二级域名是一串随机的字母数字,如果不喜欢可以自己设置二级域名或者选择配置自己拥有的域名。 修改域名 修改随机生成域名 下面教你怎么修改https://xxx.netlify.com域名为你想要的免费域名,点击setting然后点击change site name初见弹出框,即可将xxx修改成想象中的名称。是不是很完美,没有问题就可以开始自己的博客之旅了!如果还想追求完美那么接着往下看。 change site name 修改为自己的域名 很多朋友不想用带有netlify名称的域名,所以也可以像域名改为自己购买的域名,首先你要有一个域名并且已经备案,然后查看就可以进行下面操作了。 域名解析 首先对域名进行解析,添加两条解析记录,一条A记录,一条CNAME记录。A记录的记录值IP是你https://xxx.netlify.com域名对应的ip,CNAME记录的记录值是https://xxx.netlify.com的xxx.netlify.com值,添加完解析后就可将你的域名绑定到Netlify了。 domain deal 绑定域名 点击第二步: custom domain 输入域名后验证: add domain 添加成功后即可用自身域名进行访问: domain_success_own 是不是很完美了,这个时候访问你的域名即可访问到属于自己的博客网站,恨不得现在就让全宇宙之后你的博客已经建成!下面还有一步就是添加https。 添加HTTPS Netlify 使用的是 Let’s Encrypt Certificate.的免费证书,自行按着步骤添加即可,我这里因为域名都是腾讯注册的,所以也附赠了ssl,不用白不用,现在教你如何添加自己的ssl证书。 首先下载自己的证书,会看到证书里有一个Apache的文件夹,里面有三个文件,结构如下: . ├── 1_root_bundle.crt ├── 2_hhwen.cn.crt └── 3_hhwen.cn.key 分别打开三个文件填入复制到下面的内容框中保存即可: add sll 模板修改 完美的博客之旅到这里是不是就是结束了,每一个拥有自己博客的程序猿都想有一个与众不同的页面风格,这里可以参考官网的主题进行修改,本博客使用的是GODBMW博主的BMW主题主题,喜欢的也可以关注,这里就由你们自己发挥我就不多介绍了。 修改主题后记得去_config.yml中修改themes参数! 总结 到这里已经结束了搭建博客之旅,但是我知道你还在兴奋当中,如果喜欢请收藏我的博客,写作当真不易比我搭建博客还要累。 这算是搭建此博客写的第一篇博客,写博客需要静下来把做过的事情再捋一遍一步一步进行拆解,也让自己更加深刻,也希望每一个搭建了自己博客朋友善待自己的博客不要冷落。 如果大家有疑问可以留言评论,感谢支持。 喜欢的话请关注我的个人博客我在马路边,此文为博主原创,转载请标明出处。https://www.cnblogs.com/kerbside/p/10130606.html </div> <div class="article-tags"> <div class="tags-label">关键字:</div> <div class="tag-list"> </div> </div> </div> </div> <!-- 侧边栏 --> <div class="col-lg-4"> <!-- 热门资讯 --> <div class="sidebar"> <h4 class="sidebar-title"><a href="/">青岛软件培训</a></h4> <div class="hot-news-item" onclick="location.href=news-detail.html?id=2"> <p class="card-text"> 可能你正在寻找一家靠谱的IT培训机构, 渴望突破职业瓶颈, 找一份得体的工作。 恰巧万码学堂正在寻找像你这样不甘平凡的追光者! 我们拒绝纸上谈兵,直接参与真实开发流程!<br> <b>现在行动,未来可期</b>‌<br> 立即拨打<a href="tel:0532-85025005">0532-85025005</a>,预约免费职业规划咨询 前20名咨询者赠送《2025高薪技术岗位白皮书》!<br> <b>你不是在报名课程,而是在投资五年后的自己!</b> </p> <a href="http://www.qingruanit.net/c_online/p_yudingshitingke.html" target="_blank" class="btn btn-primary">申请免费试听课程</a> </div> </div> </div> </div> </div> </section> <!-- 数据统计 --> <section class="stats-section"> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 mb-4"> <div class="stat-item"> <span class="stat-number">50000+</span> <div class="stat-label">5万行代码练就真实本领</div> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <div class="stat-item"> <span class="stat-number">17年</span> <div class="stat-label">创办于2008年老牌培训机构</div> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <div class="stat-item"> <span class="stat-number">1000+</span> <div class="stat-label">合作企业</div> </div> </div> <div class="col-lg-3 col-md-6 mb-4"> <div class="stat-item"> <span class="stat-number">98%</span> <div class="stat-label">就业率</div> </div> </div> </div> </div> </section> <!-- 联系我们 --> <section id="contact" class="py-5"> <div class="container"> <h2 class="section-title">联系我们</h2> <div class="row justify-content-center"> <div class="col-lg-8"> <div class="row"> <div class="col-md-6 mb-4"> <div class="text-center"> <i class="fas fa-phone feature-icon"></i> <h4>电话咨询</h4> <p class="feature-text">0532-85025005</p> </div> </div> <div class="col-md-6 mb-4"> <div class="text-center"> <i class="fas fa-envelope feature-icon"></i> <h4>扫码添加微信</h4> <p class="feature-text"> <a href="https://work.weixin.qq.com/kfid/kfc5d203e0a7d2f3da5" target="_blank"><img src="https://www.wanmait.com/static/images/weixin.png"></a> </p> </div> </div> </div> </div> </div> </div> </section> <!-- 友情链接 --> <!-- <section class="friends-links"> <div class="container"> <h3 class="friends-links-title">友情链接</h3> <div class="friends-links-container"> <a href="#" target="_blank">腾讯课堂</a> </div> </div> </section> --> <!-- 页脚 --> <footer class="footer"> <div class="container"> <div class="row"> <div class="col-lg-6"> <h5 class="footer-title">万码学堂</h5> <p class="footer-text"><a href="http://www.ruanjianpeixun.net">青岛软件培训</a></p> </div> <div class="col-lg-6"> <h5 class="footer-title">选择一家好的青岛软件培训学校,就要看教学质量和口碑</h5> </div> </div> <hr class="my-4" style="border-color: #34495e;"> <div class="row"> <div class="col-12 text-center"> <p class="footer-text mb-0">万码学堂-做最负责任的教育-联系电话0532-85025005<p><a href="https://beian.miit.gov.cn/" target="_blank">鲁ICP备09077726号-3</a></p></p> </div> </div> </div> <script src="https://www.wanmait.com/online/wmonline.js?site=3"></script> </footer> </body> </html> <!-- JavaScript --> <script src="/bootstrap/js/jquery-3.6.0.min.js"></script> <script src="/bootstrap/js/bootstrap.bundle.min.js"></script> <script> // 确保导航栏功能正常工作 document.addEventListener("DOMContentLoaded", function() { // 手动初始化Bootstrap的Collapse组件 const navbarToggler = document.querySelector(".navbar-toggler"); const navbarCollapse = document.querySelector(".navbar-collapse"); if (navbarToggler && navbarCollapse) { navbarToggler.addEventListener("click", function(e) { e.preventDefault(); navbarCollapse.classList.toggle("show"); // 更新aria-expanded属性 const isExpanded = navbarCollapse.classList.contains("show"); navbarToggler.setAttribute("aria-expanded", isExpanded); }); } // 导航栏滚动效果 window.addEventListener("scroll", function() { const navbar = document.querySelector(".navbar"); if (window.scrollY > 50) { navbar.style.background = "rgba(255, 255, 255, 0.95)"; navbar.style.backdropFilter = "blur(10px)"; } else { navbar.style.background = "#ffffff"; navbar.style.backdropFilter = "none"; } }); // 数字动画效果 function animateNumbers() { const statNumbers = document.querySelectorAll(".stat-number"); statNumbers.forEach(stat => { const target = parseInt(stat.textContent.replace(/[^\d]/g, "")); const suffix = stat.textContent.replace(/[\d]/g, ""); let current = 0; const increment = target / 50; const timer = setInterval(() => { current += increment; if (current >= target) { current = target; clearInterval(timer); } stat.textContent = Math.floor(current) + suffix; }, 30); }); } // 当统计区域进入视口时触发动画 const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateNumbers(); observer.unobserve(entry.target); } }); }); const statsSection = document.querySelector(".stats-section"); if (statsSection) { observer.observe(statsSection); } }); </script>