个人网站搭建与管理指南

这是2024年对我个人网站更新的一些操作手册

网站项目搭建

1. 创建项目目录结构

确保你的项目目录结构如下：

/my_project
  /public
    index.html
  count.json
  server.js

2. 安装Node.js和Express框架

检查是否安装了Node.js:
```
node -v
```
前往Node.js官方网站下载并安装。
初始化Node.js项目：
```
npm init -y
```
安装Express框架：
```
npm install express
```

3. 启动服务器

在VS Code的终端中，运行以下命令启动服务器：

node server.js

打开浏览器访问 http://localhost:3000。

GitHub 管理

创建一个新的GitHub仓库。

在本地项目目录中，运行以下命令将项目连接到GitHub：

git init
git remote add origin https://github.com/yourusername/your-repo.git
git add .
git commit -m "Initial commit"
git push -u origin master

要解决这个问题，你需要在Git中配置你的用户名和电子邮件地址。这是Git提交所必需的步骤。你可以通过以下步骤在VS Code的终端或任何终端中完成这些配置：

配置Git用户名和电子邮件

在VS Code的终端中，运行以下命令来配置你的Git用户名和电子邮件：

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

将 "Your Name" 替换为你的名字，将 "[email protected]" 替换为你的电子邮件地址。

验证配置

你可以使用以下命令来验证配置是否正确：

git config --global user.name
git config --global user.email

完整步骤示例

1. 打开VS Code的终端（Ctrl+` 或终端 > 新终端）。

2. 配置Git用户名和电子邮件：

```bash
git config --global user.name "Zerox Zhang"
git config --global user.email "[email protected]"
```

3. 验证配置：

```bash
git config --global user.name
git config --global user.email
```

6. 配置完成后提交代码

配置完成后，你可以按照之前的步骤继续进行代码的提交和推送：

1. 添加所有修改后的文件：

```bash
git add .
```

2. 提交更改：

```bash
git commit -m "Updated website content and effects"
```

3. 推送到远程仓库：

```bash
git push origin master
```

7. 使用VS Code GitHub插件

1. 打开源代码管理视图。

2. 添加所有修改后的文件。

3. 输入提交信息并提交。

4. 推送到远程仓库。

通过以上步骤，你就可以在Git中配置你的用户名和电子邮件，并将修改后的代码提交并推送到GitHub仓库。

网站内容制作

`index.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zerox Zhang's Personal Website</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #000; color: #fff; font-family: 'Ubuntu', sans-serif; overflow: hidden; }
        .container { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 90%; position: relative; z-index: 1; padding-top: 10%; }
        h1 { font-size: 4em; margin-bottom: 20px; font-family: 'Ubuntu', sans-serif; font-weight: 400; font-style: italic; }
        .links { display: flex; gap: 20px; }
        .links a { padding: 15px 30px; background-color: rgba(255, 255, 255, 0.2); border: none; border-radius: 5px; color: #fff; text-decoration: none; transition: background-color 0.3s ease; }
        .links a:hover { background-color: rgba(255, 255, 255, 0.4); }
        .matrix { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; background: #000; }
        .footer { position: absolute; bottom: 10px; width: 100%; text-align: center; font-size: 0.8em; }
        .footer span { margin-right: 20px; }
        .bubble { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); pointer-events: none; animation: bubble 1s ease-out forwards; }
        @keyframes bubble { to { transform: translateY(-50px) scale(0.5); opacity: 0; } }
    </style>
</head>
<body>
    <div class="container">
        <h1>Zerox Zhang</h1>
        <div class="links">
            <a href="https://blog.zeroxzhang.cc/">Blog</a>
            <a href="https://github.com/ZeroxZhang?tab=repositories">Github</a>
            <a href="https://www.instagram.com/p/CvYwp6LSuPm/">Ins</a>
            <a href="https://cn.linkedin.com/in/zeroxzhang">Linkedin</a>
        </div>
    </div>
    <div class="matrix" id="matrix"></div>
    <div class="footer">
        <span id="visit-count">访问量统计模块: 0</span>
        <span>© 2024 Zerox Zhang</span>
    </div>
    <script>
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        document.getElementById('matrix').appendChild(canvas);
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        const letters = Array(256).join(1).split('');
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
        const draw = () => {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = '#0F0';
            letters.map((y_pos, index) => {
                const text = chars[Math.floor(Math.random() * chars.length)];
                const x_pos = index * 10;
                ctx.fillText(text, x_pos, y_pos);
                letters[index] = y_pos > 758 + Math.random() * 1e4 ? 0 : y_pos + 10;
            });
        };
        setInterval(draw, 100);
        fetch('/api/visit')
            .then(response => response.json())
            .then(data => {
                document.getElementById('visit-count').innerText = `访问量统计模块: ${data.count}`;
            });
        document.addEventListener('mousemove', (e) => {
            const bubble = document.createElement('div');
            bubble.className = 'bubble';
            bubble.style.width = `${Math.random() * 10 + 10}px`;
            bubble.style.height = `${Math.random() * 10 + 10}px`;
            bubble.style.left = `${e.clientX}px`;
            bubble.style.top = `${e.clientY}px`;
            document.body.appendChild(bubble);
            setTimeout(() => { bubble.remove(); }, 1000);
        });
    </script>
     <!-- SiteMaster Analytics Powered by AdMaster -->
    <script>!(function(a,b,c,d,e,f){var g="",h=a.sessionStorage,i="__admaster_ta_param__",j="tmDataLayer"!==d?"&dl="+d:"";
    if(a[f]={},a[d]=a[d]||[],a[d].push({startTime:+new Date,event:"tm.js"}),h){var k=a.location.search,
    l=new RegExp("[?&]"+i+"=(.*?)(&|#|$)").exec(k)||[];l[1]&&h.setItem(i,l[1]),l=h.getItem(i),
    l&&(g="&p="+l+"&t="+ +new Date)}var m=b.createElement(c),n=b.getElementsByTagName(c)[0];m.src="//tag.cdnmaster.cn/tmjs/tm.js?id="+e+j+g,
    m.async=!0,n.parentNode.insertBefore(m,n)})(window,document,"script","tmDataLayer","TM-纪念曾经工作过的AdMaster","admaster_tm");</script>
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-103780694-2"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-103780694-2');
    </script>
</body>
</html>

`server.js`

在 my_project 目录下创建 server.js 文件，并粘贴以下内容：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'public')));

// 访问计数文件路径
const countFilePath = path.join(__dirname, 'count.json');

// 增加访问量并返回当前访问量
app.get('/api/visit', (req, res) => {
    let count = 0;
    // 读取现有的计数
    if (fs.existsSync(countFilePath)) {
        const data = fs.readFileSync(countFilePath);
        const json = JSON.parse(data);
        count = json.count;
    }

    // 增加访问量
    count += 1;

    // 保存新的计数
    fs.writeFileSync(countFilePath, JSON.stringify({ count }));

    res.json({ count });
});

//

上一页MTA-多触点归因模型下一页八段锦简易学习手册

这有帮助吗？

目录