用GitHub免费搭建自己的博客网站

本文详细介绍了如何使用Node.js、Hexo和GitHub搭建个人博客,包括环境配置、博客创建、本地预览及部署到GitHub的全过程。

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

先给你们看看个效果网站:

https://www.a2data.cn/

环境准备:

  • Node.js

  • Hexo

  • Git

  • GitHub SSH key

  • Typora (Md格式书写工具)

  • idea(就是编辑工具,推荐webstorm)


安装Node.js

中文网:https://nodejs.org/zh-cn/download/

官方网站:https://nodejs.org/en/

直接下载对应的安装包,之后一顿操作,跟安装QQ一样。

安装步骤如下:

 

选择安装

 

安装完成

查看是否安装成功

启动:win键(就是windows图标得那个按键) + R

输入:cmd

清空:cls

安装hexo

npm install hexo-cli -g

输入npm install hexo -g,开始安装Hexo

输入 hexo -v 查看是否安装成功

提示:这个命令可以用cmdwebstom或者git的命令界面去运行。。

创建博客

# 方式1 一定要是一个空的文件夹
mkdir sqlsq.github.io
cd sqlsq.github.io
hexo init

提示:这个命令可以用webstom命令界面去运行。。

启动服务就可以访问你的博客了 

hexo s

本地访问

到此,你已经可以搭建hexo 博客了,恭喜一波。

就直接点一下http://localhost:4000/就可以访问你的博客了

以上你的个人博客就创建完成了!如果你也想让别人访问你的网站你就要把你的这个项目上传到你的GitHub!

接下来小编教你怎么上传到github并且设置好所有的配置!

 

安装Git

官网:https://git-scm.com/downloads

下载直接默认下一步即可:

 

 

配置自己的ssh

桌面鼠标右键,点击Git Base Here。

# 设置 git 相关信息
git config --global user.name "你得昵称"
git config --global user.email "your.email"


# 生成密钥
ssh-keygen -t rsa -C "youemail" # a2data@vip@qq.com

`连续回车 3连击` 即可完成密钥的生成创建。

查看密钥

输入cd ~/.ssh,检查是否由.ssh的文件夹 ls 查看
# 本部分需要在 github上使用,别着急请往下看。

cat id_rsa.pub

 

 

先在本地创建一个文件把你的密钥保存下来,下面需要配置github ssh的时候需要用到!就不需要再查询了!

注册Github

打开github官网:https://github.com

选择你得职业相关信息:

创建并且会给你发邮件激活:

登录邮箱激活:

 

配置Github

 

配置key

完成配置

测试配置是否成功

输入ssh -T git@github.com,测试添加ssh是否成功。
输入yes,
如果看到Hi后面是你的用户名,就说明成功了

配置成功之后就在GitHub创建你的项目仓库!用来保存你的博客

创建仓库

注意:仓库名格式必须只能这样写 你的用户名+github.io 比如我github名字是zenganiu   那我的仓库名就是 zenganiu.github.io

 

上传你本地的博客到Github

 

修改配置

修改你博客根目录中_config.yml文件,把你的github的仓库链接配置上去!

deploy:
type: git
repository: git@github.com:nianshaofeng/nianshaofeng.github.io.git
branch: master

注意:格式repository填的是你的github仓库的ssh地址

怎么查看自己的仓库的ssh地址?

配置好之后就可以把自己本地的博客上传到github了!

发布部署

# 在生成以及部署文章之前,需要安装一个扩展:如下图
npm install hexo-deployer-git --save

# 把项目打包

hexo g 

# 把项目提交到github

hexo d

 

这样你的博客就上传成功了!你就可以让你的朋友直接访问你的博客项目了!

 

<think>好的,我需要帮助用户了解如何用HexoGitHub免费搭建个人博客网站。首先,我得回忆一下Hexo的基本流程GitHub Pages的使用方法。用户可能对静态网站生成器版本控制不太熟悉,所以步骤需要详细但简洁。 首先,安装Node.jsGit是前提条件,因为Hexo基于Node.js,而Git用于部署到GitHub。我需要确保用户正确安装这些工具,可能还需要指导他们如何验证安装是否成功。 接下来是安装Hexo,通过npm全局安装。然后初始化项目,进入目录并安装依赖。这里需要注意命令的正确性,比如hexo init之后是否要指定文件夹,或者默认当前目录。 创建GitHub仓库的部分,用户需要知道仓库命名规则,比如username.github.io必须正确,否则无法生成页面。可能需要提醒用户将username替换为自己的GitHub用户名。 配置Hexo的部分,重点是修改_config.yml文件中的部署设置。需要指出正确的仓库URL分支,通常使用main或master分支。这里容易出错,比如缩进问题或拼写错误,可能需要特别强调语法。 生成静态文件部署的命令,hexo generatehexo deploy,用户需要了解每个步骤的作用。可能还要提到hexo server来本地预览,这对调试很重要。 最后,自定义主题写作的部分,用户可能希望个性化博客,所以需要推荐一些主题基本的写作流程。比如创建新文章的命令,以及如何修改主题配置。 在引用方面,用户提供的引用链接[^1][^2]需要正确对应到相关内容。比如,引用是关于使用HexoGitHub搭建网站的具体指南,而引用[^2]是静态生成器的集合,可能用来推荐其他工具,但当前问题主要关注Hexo,所以可能只在最后提到。 还要考虑用户可能遇到的问题,比如部署失败、页面无法访问、主题安装错误等,是否需要包含常见问题解答?不过根据用户要求,回答应结构清晰,分步骤解决,可能不需要深入排错,但可以建议查阅引用资料获取更多帮助。 最后,生成的相关问题需要围绕HexoGitHub Pages的优化、主题选择、部署问题等,确保问题有针对性,帮助用户进一步探索。</think>### 如何使用HexoGitHub免费搭建个人博客网站? 以下是分步操作指南: #### 1. 环境准备 - **安装Node.js** 访问[Node.js官网](https://nodejs.org/)下载安装包,完成后验证安装: ```bash node -v # 查看Node.js版本 npm -v # 查看npm版本 ``` - **安装Git** 访问[Git官网](https://git-scm.com/)下载安装包,完成后验证: ```bash git --version ``` #### 2. 安装Hexo ```bash npm install -g hexo-cli # 全局安装Hexo脚手架 hexo init myblog # 初始化博客项目 cd myblog npm install # 安装依赖 ``` #### 3. 创建GitHub仓库 - 新建仓库名为 `用户名.github.io`(需替换为你的GitHub用户名) - 仓库需设为公开(Public) - 分支默认使用 `main` 或 `master` #### 4. 配置Hexo部署 修改 `_config.yml` 文件末尾的部署配置: ```yaml deploy: type: git repo: https://github.com/你的用户名/你的用户名.github.io.git branch: main ``` #### 5. 安装部署插件 ```bash npm install hexo-deployer-git --save ``` #### 6. 生成静态文件并部署 ```bash hexo clean # 清理缓存 hexo generate # 生成静态文件 hexo deploy # 部署到GitHub ``` #### 7. 访问博客 打开浏览器输入 `https://你的用户名.github.io`,约1-2分钟后生效。 #### 8. 自定义主题(以Butterfly主题为例) 1. 安装主题: ```bash npm install hexo-theme-butterfly ``` 2. 修改 `_config.yml`: ```yaml theme: butterfly ``` 3. 重新部署: ```bash hexo clean && hexo deploy ``` #### 9. 写作新文章 ```bash hexo new "我的第一篇文章" # 在source/_posts生成Markdown文件 # 编辑完成后重新生成部署 ``` --- ### 关键配置说明 1. **本地预览** 使用 `hexo server` 可在 `http://localhost:4000` 实时调试 2. **自定义域名** 在博客根目录添加 `CNAME` 文件(内容为域名),并在域名服务商处配置DNS解析 3. **自动持续集成** 可通过GitHub Actions实现自动构建(参考[GitHub Pages文档](https://docs.github.com/en/pages)) --- ### 优势分析 | 方案 | 成本 | 技术门槛 | 可定制性 | 维护难度 | |------------|-------|----------|----------|----------| | Hexo+GitHub| 免费 | 中等 | 高 | 低 | | WordPress | 付费 | 低 | 中 | 中 | | Wix | 免费/付费 | 低 | 低 | 低 | --- ### 常见问题处理 - **页面404错误** 检查仓库命名是否正确,部署分支是否匹配 - **样式加载失败** 主题配置后需重新生成静态文件 - **部署超时** 尝试清除浏览器缓存或等待GitHub服务器刷新(最长等待10分钟) ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值