hn-failte's blog hn-failte's blog
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

hn-failte

前端cv仔
首页
  • 前端文章

    • JavaScript
    • Vue
    • React
    • Webpack
    • 混合开发
  • 学习笔记

    • 《JavaScript教程》笔记
    • 《JavaScript高级程序设计》笔记
    • 《ES6 教程》笔记
    • 《Vue》笔记
    • 《React》笔记
    • 《TypeScript 从零实现 axios》
    • 《Git》学习笔记
    • TypeScript笔记
    • JS设计模式总结笔记
  • HTML&CSS
  • HTML
  • CSS
  • CSS预处理
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 算法
  • 数据库
  • 操作系统
  • 工具
  • 学习
  • 面试
  • 心情杂货
  • 前端相关
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 技术文档

  • GitHub技巧

  • Nodejs

  • 博客搭建

  • Algorithm

  • DataBase

  • OS

  • Tools

    • Axios基本使用
    • 搭建个人博客网站
      • 一、完整建站流程
        • 1、需求分析
        • 2、注册域名
        • 3、购买服务器/主机
        • 4、域名备案
        • 5、网站源码上传
        • 6、域名解析
      • 二、实施流程
        • 1、注册Github
        • 2、创建github.io项目
        • 3、上传源码到项目
        • 4、pages服务
        • 5、源码编写
        • 6、域名处理
      • 收尾分析
        • 优点:
        • 缺点:
        • 解决方案:
    • VSCode插件推荐
    • web浏览器进化简史
  • 技术
  • Tools
hn-failte
2018-10-28

搭建个人博客网站

# 搭建个人博客网站

# 一、完整建站流程

# 1、需求分析

搭建博客

# 2、注册域名

阿里云、腾讯云、七牛云等等

# 3、购买服务器/主机

阿里云、腾讯云

# 4、域名备案

备案码、地方备案

# 5、网站源码上传

在服务器中上传项目并搭建好服务

# 6、域名解析

一般购买了域名后会有免费版的解析,要求高可以付费解析

# 二、实施流程

炒鸡省钱建博客站方案 通过github.io或者gitee.io搭建静态网页,使用域名解析至对应的地址,这里以github.io为例开始建站

# 1、注册Github

Github官网 例如:hn-failte

# 2、创建github.io项目

创建一个项目,项目的名称为用户名+github.io 例如:hn-failte.github.io

# 3、上传源码到项目

# 测试

可以先只放一个index.html文件在仓库中

# 项目处理:

  • (1)在网站上直接上传文件
  • (2)使用git推送到远程仓库(拓展) git手册:https://gitee.com/progit/

# 4、pages服务

要想在广域网访问站点,需要开启设置中的pages服务

![Alt](https://hn-failte.github.io/assets/posts/web-create-website-1.png#pic_center =30x30)

自定义域名默认为空 开启服务后,可以在广域网通过用户名.github.io访问你的站点,即之前放的index.html 例如:hn-failte.github.io

# 5、源码编写

# (1)jekyll(基于Ruby) (opens new window)

# 使用此方案,之后写的博客都需要按照框架的要求使用markdown语言编写博客,且文件名也有一定的要求,如:

![Alt](https://hn-failte.github.io/assets/posts/web-create-website-2.png#pic_center =30x30)

# 不想学该框架,如何快速搭建:
# 下载我的源码 (opens new window)

修改文件,去除一切带个性化字眼的文字

  • _config.yml //该文件大部分要修改

  • assets/res //图片资源,替换要改的 bg.png //左上角背景图,不要太大,推荐320x180 failte.png //左下角微信图片,可更名,引用同步更改即可 favicon.ico //网页ico图 logo.png //大头像 user.png //小头像 wechat图标不要动,其他的图都可以删除

  • _post文件夹用来放博客文章

  • _layout文件夹 post.html中可以修改侧边栏,不推荐大改

  • _includes文件夹 footer.html可修改页脚 contact.html可修改邮箱 about.html修改其他信息

至此,修改就完成了,将代码上传到github仓库,pages服务开启的情况下github会自动更新站点,此时就完成了github博客的搭建。浏览器中输入用户名.github.io查看效果。点击查看我的博客效果

# Markdown编辑器:

Typora、Atom、Sublime、VSCode、MarkdownPad、MaHua、各大博客网站在线编辑器

# 博客网站:
  • 博客园 (opens new window)
  • csdn (opens new window)
  • 简书 (opens new window)

# (2)其他博客框架方案

# (3)其他方案

  • 使用Bootstrap或者自己写模板等。(方案)
  • 自主性高,但是会造成一个问题,若以markdown文件作为博客文件,浏览器无法正常解析,只能得到txt的效果,若以html的样式写,工作量大且显得不专业。(专业性)
  • 若是网站不是用来写博客,完全可以自己随意写。(作用)

# 6、域名处理

  • 我希望别人通过我的域名访问,而不是github的那一长串的域名。

# 1、购买域名

选一个学习用的域名,价格很廉价

# 2、解析

  • (1)在域名商的控制台添加域名解析。 ![Alt](https://hn-failte.github.io/assets/posts/web-create-website-3.png#pic_center =30x30)

以我注册的域名为例,failte.cn是顶级域名,上图中blog开头的解析属于二级域名的解析,CNAME意在指向另一域名,记录值是上边创建的github.io地址,例如hn-failte.github.io。

  • (2)github.io在设置内填写设置的域名,例如blogs.failte.cn。

# 3、调试访问

打开浏览器,输入解析地址,例如blogs.failte.cn。

# 收尾分析

我们最终的目的是学习建站过程以及写博客,那不妨先总结下

# 优点:

  • 终于 无需备案 了
  • 广域网
  • 巧妙跳过了服务器/主机的购买, 省成本
  • 简单, 不需要搭建后台
  • 找工作时, 面试加分

# 缺点:

  • 没有后台支持,使用pages只能搭建静态网站
  • 当然,获取使用跨域资源是完全可以的

# 解决方案:

第三方工作室主机,只用来学习的话很好用,这里就不说了,有打广告的嫌疑

编辑 (opens new window)
#Blog
上次更新: 2021/08/05, 12:37:41
Axios基本使用
VSCode插件推荐

← Axios基本使用 VSCode插件推荐→

最近更新
01
基于 Taro 的微信小程序优化指南
02-16
02
搭建一个极简混合开发架构
08-03
03
使用State Hook
04-06
更多文章>
Theme by Vdoing | Copyright © 2017-2023 hn-failte | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式