手把手教你部署一个git个人网站

本文90%参考MDN

以mac电脑为例：

准备工具

文档编辑器，visual studio code
网页浏览器，chrome
图片处理器，Photoshop
版本控制系统工具和平台，git&github

此步骤可跳过

有的复杂网页需要本地网页测试服务端file://：
python -V检测自己是否装有这个工具
cd进入根目录
python -m SimpleHTTPServer
默认测试端口8000. 如果不行换localhost:7800.

网站构想

关于什么内容
呈现的主题是什么
看起来怎么样

勾勒框架---用笔和纸简单画个图。
配色让内容和色彩搭配起来---文字，主题色，图片，字体选择。
字体选择步骤：
1https://fonts.google.com/
2选择哪一种字体模块点击“+”
3对话窗Family Selected右上角"_"点开
4EMBED下面的

//等后面再html中使用
font-family: 'xxxxxxxxxx', sans-serif;//到后面css修饰使用

处理文件信息

文件内容，代码，样式单，媒体

步骤
1在熟悉的目录下建立新文件名index.html（这样做是为了后面部署git网站用的）
2在同一级文件夹中建立images文件存放你要用的图片
3建立styles文件夹用于样式的使用
4建立scripts文件夹用于与网页的交互（就是你可以通过修改其中的script文件达到修改网页的目的）
5文件路径这一点很重要*

My test page

以上的src="",内要选择images文件的路径，因为html和image文件夹在同一目录下，所以为
src="images/xxx.jpg"这里xxx.jpg代表images文件夹里的文件名，当然也可以是.png文件。alt后面指的是，当前面的图片源错误，默认的一个替换选择性的文字描述。当路径错误没有此文件时，会出现My test image。

html简介

它是用来在屏幕显示内容的，包括打开网页顶部显示的名称，对应的是head元素中的内容，正文内容，对应的是body元素，在body元素中会有p元素表示段落，ul元素表示无序列表，li表示顺序圆点，img插入的图片，h1/2/3/4标题大小，a表示锚定的一个内容，加入href可以加入链接。

css简介

在head元素之间加入这种方式就是把css和html文件链接在一起了，可以在html文件内容的基础上进行样式的修饰美观。
之后的代码在css文件中如
p {
color: red;
width: 500px;
border: 1px solid black;
}
p,li,h1 {
color: red;
}
可以对整个html文件
html {
font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */
font-family: placeholder: this should be the rest of the output you got from Google fonts
}
之前我们google字体样式的两个链接就可以拿来用了。

font-family: 'xxxxxxxxxx', sans-serif;

javascript简介

同css一样，我们也要有一个引入在body元素之间：
这里main.js是scripts文件夹里的文件
这里js用的是jquery技术，代码如下
var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';这是替换标题h1的内容为Hello world!
更多的方法在DOM对象的API中找
document.querySelector('html').onclick = function() {};样本网页的一个窗口弹出的应用
var myImage = document.querySelector('img');

myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}点击图片替换的应用
换按钮件
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');换标题h1的按钮件
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'welcome to ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'welcome to ' + storedName;
}
myButton.onclick = function() {
setUserName();
}

最后通过github来实现

1注册github账号
2创建一个仓库Repository name
3

在initialize this repository with a README边上打钩
回到github页面菜单setting下面就生成了 https://xxxxx.github.io/x'x'x'x'x/xxxxx样式的网站