202004李柃锋 发表于 2020-4-18 14:44:30

Re:从零开始搭建个人网站

本帖最后由 202004李柃锋 于 2020-5-10 18:34 编辑

#我的个人网站
1.前期准备工作
1.1.创建一个GitHub账号(如有可跳过此步骤)点击此链接跳转到GitHub,全球最大的代码托管网站。https://leostudiooo.github.io/img/gitsup.jpg注册过程十分简单,这里不再赘述。
1.2. 在GitHub上创建一个新的项目。单击 右上角【+】- New Repository新建项目。(以下简称repo)https://img2018.cnblogs.com/blog/1212465/201909/1212465-20190904143955779-1300863677.png然后填写项目信息。Repo的名字格式应为:你的用户名.github.io 。比如我的用户名是leostudiooo,那么我的repo就叫leostudiooo.github.io。在description一栏填写简介。https://img-blog.csdnimg.cn/20181218144438464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvaGFpeng=,size_16,color_FFFFFF,t_70此处选择Public。然后勾选Initialize the repository with a README。(此步的作用是用一个README.md对这个repo进行初始化)
完成后点击下面的【Create Repository】。除此之外,你还需要一个能写Markdown的编辑器。我使用的是typora。
2. 部署hexo2.1. 下载Git和Node.js可以根据hexo官网的教程下载。
2.2. 安装hexo在安装完git和node.js以后,我们需要打开cmd.exe(如果你配置好了执行策略,powershell也是一个不错的选择 。)#咋打开就不用说了吧…… Win+R输入cmd回车输入npm install -g hexo-cli回车。随便在哪新建一个文件夹,在这里运行cmd(右键git Bash here和powershell都是很好的选择),然后输入hexo init来进行初始化。(也可以用hexo init 你的文件夹绝对路径)cd切换到这个文件夹,输入npm install。这时候,你的文件夹里面会多出一堆文件。不要慌,慢慢来。你的文件夹结构应该大致是这样:.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes然后,你可以参照hexo的官方教程对_config.yml进行配置。
接下来是几个常用命令:hexo new 文章名称(之后你需要在/source/_posts/ 下找到你刚创建的 文章名称.md并对其内容进行修改。)hexo generate(生成页面文件到/public/ 下)hexo server(本地服务器,用浏览器访问 localhost:4000 )hexo clean(清除/public/ 下缓存文件,慎用!)
2.3. 部署到GitHub编辑_config.yml,在末尾添加如下内容:
deploy:
type: git
repo: https://github.com/你的用户名/你的repo #e.g. https://github.com/leostudiooo/leostudiooo.github.io
branch: master #设置分支为master,默认是gh-pages

然后在此目录下(命令行中)执行npm install hexo-deployer-git。接下来,执行hexo deploy部署到GitHub。期间,会要求你登录。(如果你有其他文件需要一同部署到GitHub Pages,请将它们复制到/public/ 下。)部署完成后,就大功告成啦!
如果你愿意折腾,也可以去试试Travis CI的自动部署。这是我参考的教程。

mhzh 发表于 2020-4-24 15:13:28

本帖最后由 zenglixing0822 于 2020-4-25 11:12 编辑

      再顺便说一说HTML,CSS和JavaScript,这三种语言都是为Web开发而生的,Html是用来编写网站的,HTML全称是HyperText Markup Language,超文本标记语言,是一种描述语言,用来定义网页结构。
       CSS (Cascading Style Sheets,层叠样式表)是用来控制网页在浏览器中的显示外观的声明式语言。浏览器会根据 CSS 的样式定义将其选定的元素显示为恰当的形式。一条 CSS 的样式定义包括属性和属性值,它们共同决定网页的外观。
      JavaScript是三个里面最牛逼的,我研究了好久都不知道这东西怎么弄,只要这个搞明白了就能让你的网站令人羡慕,它是一种编程语言,为通常用于客户端(client-side)的网页动态脚本,不过,也常通过像Node.js这样的包,用于服务器端(server-side)。他名字虽然和Java长得像但两者区别很大。
       想要近一步了解Web开发,我推荐你到这个网站去看看或这个网站,我们这里谈的是搭建个人网站就不聊这么“深奥”的东西了,不然两年都不一定讲得完(楼主没空,也肯定不会讲,所以只有我在这里给大家讲这些科普东西了)(我和楼主不熟)我最近在想把楼主想说的全说了
我也弄了一些教程,链接:https://pan.baidu.com/s/1z0wNZafKM1hWBsCFoToZFg(4月32日后失效,提取码:gz3y)
问我为什么做的这么草率,原因是我的pdf转换工具只能免费转换一篇。

mhzh 发表于 2020-4-24 14:54:24

本帖最后由 zenglixing0822 于 2020-4-26 08:21 编辑

顺便提一提,编写网站用的是HTML,在制作网站之前建议下载火狐浏览器和谷歌浏览器因为有的特性别的浏览器不兼容,以及至少一款代码编辑器:比如VScode和Notepad++,看自己的喜好。差点忘了这里还有一个工具帮助网页制作(http://www.xuegoo.com/lessons/html/)

信息中心 发表于 2020-5-8 11:01:10

zenglixing0822 发表于 2020-4-26 08:29
我的网页做的太烂太烂,我看到都不好意思了,大家千万千万别去参观。

站在时间维度学爱因斯坦的小板凳故事是因为进入时间维度就不会小看自己现在空间低维度的评价了,因为后面我会进化得更好的版本

mhzh 发表于 2020-4-21 11:28:39

本帖最后由 zenglixing0822 于 2020-4-22 11:56 编辑

之后是不是创造一个index.html文件,在里面输入html代码后保存,在网址栏输入你的用户名.github.io或者你的用户名.github.com就能看到自己的网页了?(反客为主)#我的网站

mhzh 发表于 2020-4-21 13:11:00

本帖最后由 zenglixing0822 于 2020-4-22 08:03 编辑

Repo的名字格式应为:你的用户名.github.io 或者 你的用户名.github.com(不建议使用,有概率失败)。
根据最新信息.com是不允许的,详情请见——>此处

hzhm 发表于 2020-4-26 08:54:56

我的网页做的太烂太烂,我看到都不好意思了,大家千万千万别去参观。(上面那个0822,一不小心退出来忘记密码了是我的另一个号)

刘子豪 发表于 2020-7-13 10:45:34

也可以找一些免费主机,它会提供ftp账户,通过一些软件输入账户、密码可以连接到主机

mhzh 发表于 2020-4-26 08:23:23

对了,这里还有一个工具帮助网页制作(http://www.xuegoo.com/lessons/html/)

mhzh 发表于 2020-4-26 08:29:46

我的网页做的太烂太烂,我看到都不好意思了,大家千万千万别去参观。

mhzh 发表于 2020-4-25 09:01:49

观看这个主题的人数好多啊,都有44个人了,这就是网页的作用吧。

mhzh 发表于 2020-4-21 11:55:11

本帖最后由 zenglixing0822 于 2020-4-21 11:57 编辑

十分不错

信息中心 发表于 2020-4-25 21:35:27

非常不错的课程,多宣传积累
页: [1] 2
查看完整版本: Re:从零开始搭建个人网站