超详细搭建个人网站教程,附带各种常见报错解决方案。

news/2024/5/20 4:03:02/文章来源:https://blog.csdn.net/weixin_51555115/article/details/113444142

文章目录

  • 前言
  • 解惑环节
  • 准备工作
  • 环境配置
    • 一、安装
    • 二、环境配置
      • 1.cnpm安装
      • 2.Hexo安装
      • 可能报错和问题:
  • 博客初始化
    • 1、博客搭建
    • 可能报错和问题:
    • 2、博客测试
    • 可能报错和问题
  • 主题更换
    • 可能报错和问题:
  • 部署到云端
    • 1、创建库
    • 2.配置本地
    • 3.安装插件
    • 4.部署云端
    • 可能报错和问题:
  • 芜湖起飞

前言

在这里插入图片描述

这篇文章涉及内容有:博客搭建、部署云端、主题更换。使用教程以及后期的美化我会另写文章,有需要可以关注一波。

在这里插入图片描述

我的个人网站搭建至今都三个月了,当时折腾了好几天,就草草的写了几篇日记没有过于详细的搭建过程记录。所以准备再搞一个,认认真真写一篇文章,希望能帮助更多的人。所有可能出现的报错我都加在那个阶段的后面,看目录很明显。

为了写一篇详细到能解决大部分建站问题的文章,我分别在三台机器上搭建了不同主题的博客,也遇到了各式各样的报错。如果后续在实际操作中遇到本文未提及的错误,还请发邮件给我,以便于完善文章。1272515617@qq.com。

解惑环节

按照惯例,我先解决小阳子的一些问题。

1、为什么要使用hexo和github搭建博客?——小阳子

在这里插入图片描述

1、hexo使用简单,使用命令语句操作,并且使用人数最多主题也各式各样,更 换主题操作也容易,而且支持很多小插件,比如此刻显示在我博客左下角的看 板娘;

2、Github提供免费服务器,入门学习及使用简单。

3、可修复性强,即便操作失误忘记了哪里修改错误,也可以吧blog文件干掉重 来,或者直接从github克隆。

准备工作

1、首先注册一个Github账户,用户名一定要使用英文,因为这个方案是使用 Github的免费服务器,所以个人网站的网址是你的用户名决定的。

2、挑选一个磁盘新建一个名为“blog”的文件夹。

3、调整心态,第一次搭建博客或多或少都会出现问题,这个时候不要慌,耐下性 子去检查去百度,不能半途而废。如果出现本文未提及bug还请告知一下。

环境配置

我们需要用到四个关键工具:

1、hexo:提供博客框架,高效。

2、Node.js: 环境所需;Chrome上的JavaScript运行引擎,我们会用到 bode.js下的包管理器npm。

3、Git: 环境所需;免费、开源的分布式版本控制系统。

4、GitHub: 提供免费服务器,还有代码托管等功能。

一、安装

1、Node.js:https://nodejs.org/en/

​ 建议选择左边的下载按钮,右边是最新测试版,左边稳定版。如果官网下载 太慢,可以选择下面这个地址:http://nodejs.cn/download/

2、GIt:https://git-scm.com/

​ 同样提供一下国内链接:https://npm.taobao.org/mirrors/git-for-windows/

二、环境配置

1.cnpm安装

由于国内镜像源安装较慢,所以我们要利用Node.js下的npm包管理器安装一 个cnpm,然后把镜像源指向淘宝。

1.1、win+R打开运行窗口输入Powershell并回车打开命令行窗口。或者使用cmd,操作相同,在运行窗口输入cmd打开的就是cmd窗口。

1.2、在命令行输入下列内容,检测一下node.js是否安装成功

npm -v

1.3、输入下列命令进行cnpm安装及镜像源设定

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.4、检查cnpm是否安装成功

cnpm -v

2.Hexo安装

2.1.利用cnpm全局安装hexo框架:

cnpm install -g hexo-cli

2.2.验证hexo是否安装完成

hexo -v

可能报错和问题:

1.如果出现报错,install不是内部命令。说明是cnpm的安装过程出现了问题,需要重新执行2.1的语句。

博客初始化

1、博客搭建

找到之前新建的blog文件,在该目录下的地址栏输入cmd打开命令行窗口。或者使用语句切换也可以。例如:我的在f盘。按顺序执行下面语句就行。

1、f:   
2、cd blog

切换完路径以后,开始搭建博客,记住一定要在你新建的blog文件夹路径内

hexo init

可能报错和问题:

报错

如果这一步出现报错,提示git不是内部指令。需要安装一下git。回到一.2步骤即可。

在博客搭建过程中,很可能会卡主,这时候只需要随便按一下键盘就行。比如说空格键。而且不止卡一次,需要一直按键。

2、博客测试

博客搭建好以后,在命令行输入一下几个命令进行测试:

hexo g     #构建博客
hexo s     #发布博客到本地

在弹出的网址上访问你的博客。默认是landscape主题。

并且会有第一篇文章,Hello World!

可能报错和问题

1、如果实在嫌慢的话,或者卡主不动,安装失败。可以改一下host,操作如下:

1.获取Github相关网站的ip

访问https://www.ipaddress.com,分别输入

github.global.ssl.fastly.net和github.com,查询ip地址。

2.修改本地host文件
Window为例 C:\Windows\System32\drivers\etc下的hosts文件

3.增加host映射

参考如下,增加github.global.ssl.fastly.net和github.com的映射。

151.101.113.194   github.global.ssl.fastly.net
192.30.253.112   github.com
具体ip请根据查询为准

4.更新DNS缓存

cmd命令行输入:ipconfig /flushdns,使增加的映射生效。

2、还有一种办法是将npm的镜像源改成淘宝的:

npm config set registry http://registry.npm.taobao.org/

3、hexo现在自带的landscape现在直接整合了。不在themes文件显示了。

所以打开themes文件发现是空的不需要惊慌。我刚刚两台设备都出现这情况,乱操作半天。

svExjs.gif

没有意外的话,已经可以访问本地的端口进入博客了。接下来就是更换博客主题。

主题更换

hexo默认的主题是landscape。也很少有人用,这里放上知乎上大佬提供的热门博客:

https://www.zhihu.com/question/24422335

挑选好喜欢的主题以后就可以正式进入更换了。操作起来也很简单,只需要在blog文件目录下打开cmd输入克隆命令即可,这里以casper主题为例:

git clone https://github.com/xzhih/hexo-theme-casper themes/casper

https://imgchr.com/i/yibgqf)

主题下载完成后,以记事本方式打开blog目录下的_config.yml文件,翻到最底下找到themes,在后面将landscape改为casper(根据你自己下载的主题来)

可能报错和问题:

1、克隆太慢,进度条总卡主不走。卡主的时候随便按个按键就行,实在嫌慢的可以直接从github下载文件然后解压到blog/themes文件下。如图:

yibtr6.png

2、更换完主题后还可能出现这样的报错,缺少某个模块。

yibgqf.png

因为casper主题采用的文件格式已经被hexo5.0更新时抛弃掉了,我这里又产生了新的报错。如果你也出现了这样的问题。别慌,只要手动下载一下对应的包就行。

npm i hexo-renderer-swig

最后再次hexo g然后hexo s一下,访问一下本地端口查看主题是否更换成功。

至此,我们的博客已经搭建完成,并且已经可以在本地访问了。现在就剩下最后一个任务:将博客部署到云端,也就是部署到我们开始时注册的Github提供的免费的服务器。

部署到云端

1、创建库

1.登录上GitHub账号,进入的就是如图界面。如果不是的话点击左上角的小猫就会跳转到这里。然后点击左边的绿色按钮Create repository。

在这里插入图片描述

在这个页面里,必须在Repository name栏中填的信息和用户名一样。

<你注册时起的用户名>.github.io 例如:shanguwei.github.io

Description一栏中填的是,简介。随便填,芜湖起飞都行。求击剑也不是不可以。

剩下的都不用改动,直接翻到底点确定就行。

在这里插入图片描述

完成以后就会弹出这个页面,记住把红线画的地址栏内容复制一下,用来设置上传地址。

在这里插入图片描述

2.配置本地

打开blog文件里的_config.yml,还是翻到最底下找到deployed条目。

将内容改写成所示:

deploy:
type: git
repo: https://github.com/shanguwei/shanguwei.github.io.git
branch: master

一定要注意冒号是英文,并且冒号后面一定要空格。repo后面跟的是上一步复制的地址。改完后保存修改。

3.安装插件

切换到blog目录下打开cmd窗口,执行以下命令安装必须的插件。

npm install --save hexo-deployer-git

安装完成以后我们就可以部署到云端了。

4.部署云端

先后执行下面指令

hexo clean
hexo g
hexo s(并观察一下本地的网站是否正常)
hexo d

稍等片刻,我们就可以访问网站了。

地址就是:https://你的用户名.github.io/

可能报错和问题:

1.提示git不是内部以及外部指令:

在这里插入图片描述

如果出现和图上一样的报错,那就说明Git没有安装或者是没有安装上传云端需要的插件,重新安装一下GIt或者运行一下该命令:

npm install --save hexo-deployer-git

在这里插入图片描述

2、提示不能连接到Github:

在这里插入图片描述

这知识在验证身份,首次更新都需要输一次账号邮箱和密码:

git config --global user.email 1272515617@qq.comgit config --global user.name shanguwei

随后根据提示再次输入用户名和密码就大功告成。

密码默认是不显示的,所以直接输就行,输完了回车。然后静静等待上传完毕。

在这里插入图片描述

还会弹出一个窗口,需要填一下密码登陆,安照要求填了就行。

在这里插入图片描述

芜湖起飞

最后就是访问个人网站了,好好享受一下这种成就感,和HelloWorld再次给你的熟悉感。

放上两个刚建好的博客。

1、

在这里插入图片描述

2、

在这里插入图片描述

HelloWorld无时无刻地提醒着我是个菜鸡,我还啥也不懂。这样才有前进的动力,正如我博客的副标题:

求知若渴,虚心若愚。

Stay hungry,stay foolish。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_774357.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

超详细的网站搭建教程使用阿里云RDS和ECS搭建个人博客网站

今天讲一讲如何利用云数据库、云服务器、word press搭建博客网站 1、注册阿里云账号 2、购买云数据库RDS&#xff08;MySQL&#xff09; 3、购买云服务器ECS 4、配置数据库 5、配置服务器 6、部署LAMP环境【Apache、MySQL、PHP、wordpress】 1、注册阿里云账号 浏览器搜索阿…

分布式解决方案-解决网站跨域请求

1.什么是网站跨域 跨域原因产生&#xff1a;在当前域名请求网站中&#xff0c;默认不允许通过ajax请求发送其他域名。 两个项目之间使用ajax(前端类似后端的httpclient)实现通讯&#xff0c;如果浏览器访问的域名和端口与ajax请求访问的地址不一样的情况下&#xff0c;…

互联网公司都在用什么语言写网站后端?

2019独角兽企业重金招聘Python工程师标准>>> 豆瓣 python 淘宝 php 百度 php python 优酷 java php 谷歌 python youtube python facebook php wikipedia php twitter ruby 看来php和python平分秋色&…

开发高性能网站的web性能测试工具

开发高性能网站的web性能测试工具文章分类:Web前端 WEB性能测试工具主要分为三种&#xff0c;一种是测试页面资源加载速度的&#xff0c;一种是测试页面加载完毕后页面呈现、JS操作速度的&#xff0c;还有一种是总体上对页面进行评价分析&#xff0c;下面分别对这些工具进行介绍…

网站访问流程

(点击查看大图)网站的架构如上图所示&#xff0c;下面将分析从用户在浏览器输入访问一个域名&#xff0c;例如www.yy.com&#xff0c;到页面全部展示出来经过的所有流程。(1)用户在浏览器地址栏输入www.yy.com或者yy.com(2)此时系统将检查缓存(这里的缓存包括浏览器缓存、操作系…

60款高质量的网站模板免费下载(上篇)

您可能还喜欢 分享45款高质量的免费(X)HTML/CSS模板最新30佳精美 PSD 网站模板免费下载寻找网页设计灵感的27个最佳网站推荐60佳灵感来自大自然的网页设计作品欣赏分享100佳精美的作品集网站设计案例当你想快速制作出一个网站的时候&#xff0c;网站模板就非常有用了。学习网页…

50款高质量的网站PSD模板免费下载(第一季)

今天开始推出系列文章向大家分享50款高质量的网站PSD模板&#xff0c;您可以免费下载使用。这些现成的PSD模板可以让您的工作得心应手&#xff0c;帮助您节省大量的时间和精力。感谢那些优秀的设计师分享他们的劳动成果&#xff0c;让更多的人可以使用他们的创意设计&#xff0…

java电脑过滤网站_Java过滤器Filter讲解(Java基础)

你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;本篇文章小结了Java过滤器的知识点&#xff0c;献给初学者&#xff0c;分享获取新知&#xff0c;希望我们一起进步。文章目录一、什么是过滤器二、如何编写过滤器三、 过滤器的配置四、Filter的生命周期五、多个Filter的执…

iis 一个域名 带斜杠的配置_零基础建站如何配置PHP运行环境 几种服务器环境配置的选择和方法...

上次给大家分享了小白建站如何选择虚拟空间及服务器&#xff0c;及购买域名的基础知识&#xff0c;这些是硬性要求&#xff0c;你的网站要想运行起来&#xff0c;硬件只是基础&#xff0c;真正的技术是软件&#xff0c;关于PHP软件开发技术&#xff0c;后面我们会慢慢的分享给大…

3月第二周域名主机网站排名 万网第一西部数码第二

据国际统计机构Alexa公布的最新数据显示&#xff0c;3月第二周&#xff08;3月5日-3月11日&#xff09;&#xff0c;中国万网网站用户覆盖数达1860&#xff0c;以绝对优势高居榜首。 西部数码次之&#xff0c;达710。易名中国排名第三&#xff0c;为600。下面&#xff0c;IDC评…

研究了100个自学网站,我总结出了这份Java学习资料!

这份Java资源中包括&#xff1a; Java、面向对象、多态、接口、IDEA、异常、集合框架、IO流、多线程、企业级框架、HTML、数据库、Java web、项目实战、GitHub、Spring、多线程、JVM、集合、多线程、MyBatis、MySQL、Git、IDEA、Redis、算法、简历模板、高频面试题、技术书籍、…

作为程序员,我都逛了哪些技术网站?(收藏篇)

目录 一、在线教程 二、视频教程 1、图灵社区 四、官网 五、国内博客社区 七、小微型博客 八、开源社区 九、面试刷题 一、在线教程 首先列出一些在线教程网站&#xff0c;这些在线教程网站通常都比较适合入门&#xff0c;可以作为开发学习路上的第一个阶梯&#xff0c;…

Android如何使用WebView访问https的网站

2019独角兽企业重金招聘Python工程师标准>>> Android中可以用WebView来访问http和https的网站&#xff0c;但是默认访问https网站时&#xff0c;假如证书不被Android承认&#xff0c;会出现空白页面&#xff0c;且不会有任何提示信息&#xff0c;这时我们必须加多一…

大型网站技术架构的演进

最近我在阅读2本关于大型网站架构的书&#xff1a;《大型网站技术架构——核心原理与案例分析》李智慧、《大型网站系统与Java中间件实践》曾宪杰。我期望从这些书中学习到大型网站是如何做架构的&#xff0c;这个过程会遇到什么问题。当看完这2本书后&#xff0c;我总结出两个…

第一次部署asp.net网站

在VS中将项目发布到指定文件夹 在IIS中添加网站&#xff0c;填写配置信息 然后在hosts文件中将ip与域名关联起来 hosts文件位置&#xff1a;g:\windows\system32\drivers\etc 末尾调试的时候提示出错&#xff0c;是因为应用程序池应该选择ASP.NET V4.0&#xff0c;因为VS中默认…

精美网站设计:25个以全屏照片为背景的网页作品

高质量的照片能够给网站带来强烈的视觉冲击力&#xff0c;不仅能够增强设计的美感&#xff0c;还可以突出网站的主题。在使用这种大照片作为网站背景的时候&#xff0c;为了能够和网站的其它内容很好的融合在一起&#xff0c;你需要考虑很多事情&#xff0c;否则可能会导致网站…

帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator

为什么80%的码农都做不了架构师&#xff1f;>>> 日期&#xff1a;2012-11-1 来源&#xff1a;GBin1.com 如果你需要开发响应式的网站的话&#xff0c;使用一个必要的浏览工具来检验不同尺寸屏幕下显示效果还是非常有用的&#xff0c;相信你肯定还记得我们以前给大…

dedecms 如何调用多个不同栏目的文章_如何高效率的优化网站关键词排名?

把想要达到排名的关键词做到合理位置&#xff0c;seo就成功了一大半&#xff0c;更高效率的优化网站关键词排名&#xff0c;是站长的终极目标。如果消耗的时间成本更久&#xff0c;资源成本更多&#xff0c;那么做seo是不划算的。单位时间内产生的效益更好&#xff0c;我们才能…

提高网站打开速度的7大秘籍

很多站长使用虚拟主机来做网站&#xff0c;网页内容一旦很多&#xff0c;网站打开速度就会特别慢&#xff0c;如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做&#xff0c;不妨通过网页代码优化的方式来提高速度&#xff0c;卢松松总结了一些可行性的方法。 1: 缩小Jav…

Wordpress主题和网站设计开发手册和资源

日期&#xff1a;2013-3-19 来源&#xff1a;GBin1.com 如果你希望开始运营和发布自己的第一个网站的话&#xff0c;找到一个合适的CMS或者免费平台的话&#xff0c;绝对是关键的一步&#xff0c;通常大家可能都会选择wordpress&#xff0c;因为它是最流行的搭建网站的框架和产…