当前位置：首页 > news >正文

DIY搭建网站（学术个人介绍主页）

news 2024/12/4 13:52:32

本教程介绍了如何创建并管理一个基于GitHub Pages的个人网站。首先，需要在GitHub上创建一个遵循特定命名规则的新仓库，例如用户名.github.io，以便建立个人站点。接着，通过Fork一个开源模板代码仓库并添加index.html文件来构建主页，编写HTML代码以创建网页内容。此外，还可以选择使用Markdown文件作为主页，GitHub Pages将自动将其渲染为HTML。在修改个人内容时，可以在about.md文件中编辑个人描述，并提供了原始代码示例。完成文件编辑后，需要提交更改并推送到GitHub仓库。随后，通过访问https://用户名.github.io，可以查看构建完成的个人网页。为了进一步个性化网站，可以修改_config.yml文件中的网站设置，包括基本设置、作者信息、评论系统、搜索引擎优化、阅读文件等。这些设置将影响整个网站的布局和功能，包括语言、标题、描述、作者信息和仓库地址等。通过这些步骤，用户可以创建并定制一个简单的个人网页，并根据需要添加更多的HTML和CSS来增强网页的美观性和功能。

1. 创建仓库

首先，你需要在GitHub上创建一个新的仓库。仓库的名称必须遵循特定的格式，对于个人站点，格式为用户名.github.io，其中用户名是你的GitHub账户名。例如，如果你的用户名是kimi，那么仓库名应该是kimi.github.io。为方便大家搭建自己的网站，此处给出一个开源的模板代码仓库：

点此获取开源模板代码

在项目页面的右上角，你会看到一个“STAR”和"Fork"按钮。先点击STAR再点击“Fork”，GitHub会将这个项目复制到你的GitHub账户下，创建一个新的仓库，这个新仓库会与原项目保持连接，但更改不会影响原项目。点击"Fork"按钮后，GitHub会弹出一个下拉菜单，让你选择将项目Fork到哪个GitHub账户下。如果你只有一个账户，通常这个步骤会自动完成。

Fork操作完成后，浏览器会自动跳转到你的新仓库页面。这个页面的URL会显示为你的GitHub用户名加上.github.io，例如https://github.com/你的用户名/Chenbin_ZHANG.github.io。

2. 添加文件

创建仓库后，你可以添加一个文件作为你的主页。通常，这个文件会是一个index.html文件，你可以在其中编写HTML代码来创建你的网页内容。你也可以使用Markdown文件（如index.md），GitHub会自动将其渲染为HTML。

1.添加`index.html`文件

创建文件：在GitHub仓库页面，点击“Add file”按钮，然后选择“Create new file”。
命名文件：在文件名输入框中输入index.html。
编写HTML代码：在打开的编辑器中，你可以开始编写HTML代码。一个基本的HTML页面结构如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的个人网页</title>
</head>
<body><h1>欢迎来到我的个人网页</h1><p>这里是一些关于我的信息。</p><!-- 这里可以添加更多的HTML内容，比如图片、链接、列表等 -->
</body>
</html>

2. 提交和推送`index.html`

提交更改：编写完HTML代码后，你需要提交这个文件。在页面底部，输入提交信息，比如“Add index.html”，然后点击“Commit changes”按钮。
推送到GitHub：如果你使用的是命令行，你可以使用以下Git命令将本地更改推送到GitHub仓库：

git add index.html
git commit -m "Add index.html"
git push origin main

3. 使用Markdown作为主页

如果你更喜欢使用Markdown来编写内容，GitHub Pages也支持将Markdown文件自动渲染为HTML。以下是使用Markdown作为主页的步骤：

创建Markdown文件：在仓库中创建一个名为index.md的文件。
编写Markdown内容：在index.md文件中，使用Markdown语法编写内容。例如：

# 我的个人网页欢迎来到我的个人网页。这里是一些关于我的信息。- 列表项1
- 列表项2![图片描述](图片链接)

配置Markdown渲染：GitHub Pages默认会自动渲染.md文件为HTML，但你需要确保仓库的设置中启用了Jekyll（GitHub Pages的静态站点生成器），因为默认情况下，只有以.md结尾的文件才会被渲染。
提交和推送index.md：和index.html一样，提交并推送index.md文件到你的GitHub仓库。

4. 访问你的网页

提交并推送文件后，GitHub Pages会构建你的网站。构建完成后，你可以通过https://你的用户名.github.io来访问你的个人网页。

通过这些步骤，你可以创建一个简单的个人网页，并且可以根据需要添加更多的HTML和CSS来进一步美化和增强你的网页功能。

3. 修改个人内容

在_pages中的about,md中对个人描述内容进行修改，其原始代码如下：

---
permalink: /
title: "Chenbin ZHANG"
author_profile: true
redirect_from: - /about/- /about.html
---Chenbin Zhang, male, is an undergraduate student in the class of 2021, majoring in Intelligent Science and Technology at College of Automation & College of Artificial Intelligence, Nanjing University of Posts and Telecommunications. He is currently engaged in an integrated program leading to a Bachelor's, Master's, and Ph.D. in Control Science and Engineering. Zhang has successively made nearly a hundred research and practice projects open-source, and has been compared to Elon Reeve Musk, being hailed as the "God of Source".More details
======
The URL for Baidu Baike entries is：https://baike.baidu.com/item/%E5%BC%A0%E6%99%A8%E6%96%8C?fromModule=lemma_search-boxEducational Background
======
September 2021 - Present            Nanjing University of Posts and Telecommunications            Intelligent Science and Technology | Bachelor's Degree          Major Ranking: 11/62
Skills Certificates: English Certificates (CET-4, CET-6), proficient in languages such as Python, C, and have relevant experience with development platforms like ISE Design, Jieliuchuang EDA.
Work Positions: Served as the publicity committee member of Class B210414, proficient in PPT creation and have extensive experience in article writing.Hands-on experience
======
March 2024       School-level Programming Project             Design and Implementation of Intelligent Face Recognition Access Control System           Project Leader
------
Utilized the OpenCV image processing library to capture images and construct face data. Based on the MindSpore platform developed by Huawei, designed relevant face recognition algorithms using the dlib algorithm. Achieved real-time image capture and face recognition, created a simple UI interface, and controlled components such as MLX90614, servos, and passive buzzers using Raspberry Pi 4B and Arduino UNO development boards to implement the face recognition access control system.November 2023       School-level Electronic Circuit Project Design         Design of a Digital Pulse Width Modulation Pulse Signal Generator           Project Leader
Utilized ISE Design to develop and create a pulse signal generator with adjustable pulse width, controlled by buttons, which can increase or decrease the duty cycle by 1% each time, displaying the duty cycle of the output pulse signal on a digital tube, and also showing the pulse width situation.May 2023       School-level Open Experimental Project             Design and Implementation of a Laser Harp                   Main Participant
Designed and created a laser harp, programmed the microcontroller to control the production of different musical notes with laser beams and the display of LED lights, and it can play various music and adjust the volume.Honors and awards
======
Personal Honors: Huawei-Ministry of Education 2022-2023 Intelligent Infrastructure "Future Star", Outstanding Young Volunteer, Outstanding League Member, Nanjing University of Posts and Telecommunications 2022-2023 Comprehensive Progress Scholarship, Nanjing University of Posts and Telecommunications Advanced Individual.
Competition Achievements: 2024 U.S. Collegiate Mathematical Modeling Competition S Award, Nanjing University of Posts and Telecommunications 2024 "Challenge Cup" Competition Bronze Award, 2023 (15th) Mathematical Modeling Competition Third Prize, Second Smart City Technology Competition Third Prize, 2023 College Student Advertising Art Competition Third Prize, Third College Student Financial Literacy Competition First Prize, 2022 China Youth Giant Panda Guardian Plan Honorary Award.Scientific research projects
======
Led a key school-level STITP project: Research on Meteorological Forecasting Based on Graph Neural Networks.
Designed and constructed a GCN (Graph Convolutional Network) model, utilizing graph convolutional layers to capture local and global features. By optimizing the model, effectively integrated spatiotemporal information to achieve predictions of meteorological indicators for a future period, enhancing the accuracy of meteorological forecasting.

permalink: / 表示这个页面是网站的主页。
title: "Chenbin ZHANG" 是网页的标题。
author_profile: true 表示显示作者的个人资料。
redirect_from: 表示从其他路径（如/about/和/about.html）访问时，会自动重定向到这个页面。

并且该内容提供了一个链接到张晨斌的百度百科条目。

4. 访问你的网页

提交并推送文件后，通常需要等待1到5分钟，GitHub Pages服务会构建你的网站。之后，你可以通过https://用户名.github.io来访问你的个人网页。为此你需要修改该项目中的_config.yml

# Welcome to Jekyll!
#
# This config file is meant for settings that affect your entire site, values
# which you are expected to set up once and rarely need to edit after that.
# For technical reasons, this file is *NOT* reloaded automatically when you use
# `jekyll serve -l -H localhost`. If you change this file, please restart the 
# server process.# Basic Site Settings
locale                   : "en-US"
title                    : "HOME PAGE"
title_separator          : "-"
name                     : &name "Your Name"
description              : &description "personal description"
url                      : https://ace-trump-tech.github.io/Chenbin_ZHANG.github.io/ # the base hostname & protocol for your site e.g. "https://[your GitHub username].github.io"
baseurl                  : "" # the subpath of your site, e.g. "/blog"
repository               : "ace-trump-tech.github.io/Chenbin_ZHANG.github.io"# Site Author - The following control what appear as part of the author content on the side bar.
#               If a field is blank the icon and link will not appear, otherwise it will be shown.
#               Additional customization can be done by editing /_includes/author-profile.html
author:# Biographic informationavatar           : "picture1.png"name             : "Chenbin ZHANG"pronouns         : # example: "she/her"  bio              : "an undergraduate student in the class of 2021, majoring in Intelligent Science and Technology at College of Automation & College of Artificial Intelligence, Nanjing University of Posts and Telecommunications."location         : "Nanjing China"#employer         : "Red Brick University"uri              : # URLemail            : "b21041417@njupt.edu.cn" # Academic websitesarxiv            : # URL - Update with the correct link to your profilegooglescholar    : "https://scholar.google.com/citations?user=PS_CX0AAAAAJ"impactstory      : # URLorcid            : "http://orcid.org/yourorcidurl"semantic         : # URLpubmed           : "https://www.ncbi.nlm.nih.gov/pubmed/?term=john+snow"researchgate     : # URLscopus           : # URL# Repositories and software developmentbitbucket        : # Username - Update with your username on the sitecodepen          : # Usernamedribbble         : # Usernamegithub           : "academicpages"kaggle           : # Username  stackoverflow    : # User number or user number and name (i.e., use "1" or "1/jeff-atwood")    # Social mediabluesky          : "bsky.app" # Replace this with you Bluesky usernamefacebook         : # Usernameflickr           : # Usernamefoursquare       : # Usernamegoodreads        : # Usernamegoogle_plus      : # Usernamekeybase          : # Usernameinstagram        : # Usernamelastfm           : # Usernamelinkedin         : # Usernamemastodon         : # URLmedium           : # URLpinterest        : # Usernamesoundcloud       : # Usernamesteam            : # Usernametelegram         : # URLtumblr           : # Usernametwitter          : # Username for X / Twittervine             : # Usernameweibo            : # Usernamewikipedia        : # Usernamexing             : # Usernameyoutube          : # Usernamezhihu            : # Username# Publication Category - The following the list of publication categories and their headings
publication_category:books:title: 'Books'# manuscripts:#  title: 'Journal Articles'    conferences:title: 'Conference Papers'# Site Settings
teaser                   :  # filename of teaser fallback teaser image placed in /images/, .e.g. "500x300.png"
breadcrumbs              : false # true, false (default)
words_per_minute         : 160
future                   : true
read_more                : "disabled" # if enabled, adds "Read more" links to excerpts
talkmap_link             : false #change to true to add link to talkmap on talks page
comments:provider               : # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"disqus:shortname            :discourse:server               : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.orgfacebook:appid                :num_posts            : # 5 (default)colorscheme          : # "light" (default), "dark"
staticman:allowedFields          : ['name', 'email', 'url', 'message']branch                 : "gh-pages" # "master", "gh-pages"commitMessage          : "New comment."filename               : comment-{@timestamp}format                 : "yml"moderation             : truepath                   : "_data/comments/{options.slug}"requiredFields         : ['name', 'email', 'message']transforms:email                : "md5"generatedFields:date:type               : "date"options:format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
atom_feed:hide                   : false     # change to true to hide the RSS feed in the footerpath                   : # blank (default) uses feed.xml# SEO Related
google_site_verification :
bing_site_verification   :
alexa_site_verification  :
yandex_site_verification :# Social Sharing
twitter:username               : &twitter
facebook:username               :app_id                 :publisher              :
og_image                 :  # Open Graph/Twitter default site image
# For specifying social profiles
# - https://developers.google.com/structured-data/customize/social-profiles
social:type                   : # Person or Organization (defaults to Person)name                   : # If the user or organization name differs from the site's namelinks: # An array of links to social media profiles# Analytics
analytics:provider               :  "false" # false (default), "google", "google-universal", "google-analytics-4", "custom"google:tracking_id          :# Reading Files
include:- .htaccess- _pages- files
exclude:- "*.sublime-project"- "*.sublime-workspace"- .asset-cache- .bundle- .github- .jekyll-assets-cache- .sass-cache- assets/js/_main.js- assets/js/plugins- assets/js/vendor- CHANGELOG- Capfile- config- Dockerfile- Gemfile- Gruntfile.js- gulpfile.js- LICENSE- local- log- node_modules- package.json*- Rakefile- README- tmp- vendor
keep_files:- .git- .svn
encoding: "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"# Conversion
markdown: kramdown
highlighter: rouge
lsi: false
excerpt_separator: "\n\n"
incremental: false# Markdown Processing
kramdown:input: GFMhard_wrap: falseauto_ids: truefootnote_nr: 1entity_output: as_chartoc_levels: 1..6smart_quotes: lsquo,rsquo,ldquo,rdquoenable_coderay: false# These settings control the types of collections used by the template
collections:teaching:output: truepermalink: /:collection/:path/publications:output: truepermalink: /:collection/:path/portfolio:output: truepermalink: /:collection/:path/talks:output: truepermalink: /:collection/:path/# These settings control how pages and collections are included in the site
defaults:# _posts- scope:path: ""type: postsvalues:layout: singleauthor_profile: trueread_time: truecomments: trueshare: truerelated: true# _pages- scope:path: ""type: pagesvalues:layout: singleauthor_profile: true# _teaching- scope:path: ""type: teachingvalues:layout: singleauthor_profile: trueshare: truecomments: true# _publications- scope:path: ""type: publicationsvalues:layout: singleauthor_profile: trueshare: truecomments: true# _portfolio- scope:path: ""type: portfoliovalues:layout: singleauthor_profile: trueshare: truecomment: true# _talks- scope:path: ""type: talksvalues:layout: talkauthor_profile: trueshare: true# Sass/SCSS
sass:sass_dir: _sassstyle: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style# Outputting
permalink: /:categories/:title/
# paginate: 5 # amount of posts to show
# paginate_path: /page:num/
timezone: Etc/UTC # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones# Plugins
plugins:- jekyll-feed- jekyll-gist- jekyll-paginate- jekyll-sitemap- jekyll-redirect-from- jemoji# Mimic GitHub Pages with --safe
whitelist:- jekyll-feed- jekyll-gist- jekyll-paginate- jekyll-sitemap- jekyll-redirect-from- jemoji# Archives
#  Type
#  - GitHub Pages compatible archive pages built with Liquid ~> type: liquid (default)
#  - Jekyll Archives plugin archive pages ~> type: jekyll-archives
#  Path (examples)
#  - Archive page should exist at path when using Liquid method or you can
#    expect broken links (especially with breadcrumbs enabled)
#  - <base_path>/tags/my-awesome-tag/index.html ~> path: /tags/
#  - <base_path/categories/my-awesome-category/index.html ~> path: /categories/
#  - <base_path/my-awesome-category/index.html ~> path: /
category_archive:type: liquidpath: /categories/
tag_archive:type: liquidpath: /tags/
# https://github.com/jekyll/jekyll-archives
# jekyll-archives:
#   enabled:
#     - categories
#     - tags
#   layouts:
#     category: archive-taxonomy
#     tag: archive-taxonomy
#   permalinks:
#     category: /categories/:name/
#     tag: /tags/:name/# HTML Compression
# - http://jch.penibelst.de/
compress_html:clippings: allignore:envs: development

基本网站设置

locale: 网站的语言设置，这里是“en-US”。
title: 网站的标题，这里是“HOME PAGE”。
title_separator: 标题分隔符，这里是“-”。
name: 网站作者的名字，这里使用了一个YAML锚点（&name）。
description: 网站的描述，这里也使用了YAML锚点（&description）。
url: 网站的基地址，这里是GitHub Pages的地址。
baseurl: 网站的子路径，这里没有子路径。
repository: GitHub仓库的地址。

5. 自定义主题（可选）

GitHub Pages 默认提供了一些静态的主题供用户选择，但如果你想要更丰富的自定义功能，你可能需要使用第三方主题或者自己编写样式。以下是一些代码示例，帮助你自定义 GitHub Pages 网站的外观。

1.使用第三方主题

选择主题 在仓库的 Settings 页面中找到 Pages 选项，点击 Change Theme 来选择一个你喜欢的主题。

添加主题到你的仓库 如果你找到了一个第三方的主题，通常你需要下载该主题的压缩包，并将其解压到你的仓库中。例如，假设你下载了一个名为 theme-name 的主题，你需要将该主题文件夹上传到你的仓库中。

2.自定义样式

创建或修改 CSS 文件 你可以创建一个 main.css 文件在你的仓库的 assets/css/ 目录下（如果没有这个目录，你需要创建它）。以下是一些基本的样式代码：

/* assets/css/main.css */
body {font-family: 'Arial', sans-serif;background-color: #f4f4f4;color: #333;
}.container {width: 80%;margin: auto;overflow: hidden;
}header {background: #50b3a2;color: white;padding: 20px;text-align: center;
}header h1 {margin: 0;
}footer {background: #333;color: white;text-align: center;padding: 10px;position: absolute;bottom: 0;width: 100%;
}

更新 _config.yml 文件 你需要在 _config.yml 文件中指定自定义样式文件的路径：

# _config.yml
sass:style: compressed

在布局文件中链接 CSS 在你的布局文件（例如 default.html）中，链接到你的 CSS 文件：

<!-- _layouts/default.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ site.title }}</title><link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
</head>
<body>{{ content }}
</body>
</html>

通过这些步骤，你可以自定义你的 GitHub Pages 网站的外观。请注意，自定义样式可能会覆盖主题的一些默认样式，因此你可能需要根据主题的具体结构进行调整。

6. 添加项目演示（可选）

要在你的GitHub Pages网站上展示你的项目，你需要将项目的静态文件添加到仓库中，并确保它们可以通过网页访问。以下是一些步骤和示例代码，帮助你完成这个过程。

1. 创建项目目录

首先，在仓库的根目录下创建一个新的文件夹来存放你的项目文件。例如，你可以创建一个名为 projects 的文件夹。

mkdir projects

2. 添加项目文件

将你的项目文件（HTML、CSS、JavaScript等）添加到这个新创建的 projects 文件夹中。例如：

projects/project1/index.html
projects/project1/style.css
projects/project1/script.js

3. 创建项目索引页面

你可能希望在主页上有一个链接到你的项目页面的列表。在你的 index.html 或者其他主页布局文件中，添加以下代码：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{ site.title }}</title><link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
</head>
<body><h1>My Projects</h1><ul><li><a href="/projects/project1/">Project 1</a></li><!-- Add more projects here --></ul>{{ content }}
</body>
</html>

4. 更新 `_config.yml` 文件

确保Jekyll会包含 projects 目录下的文件，并为它们生成网页。在 _config.yml 文件中添加：

# _config.yml
include:- projects

5. 提交并推送更改

使用Git命令行提交并推送更改到GitHub：

git add .
git commit -m "Add project directory"
git push origin main

6. 示例项目页面代码

以下是一个简单的项目页面 index.html 文件示例，它展示了如何组织项目内容。

<!-- projects/project1/index.html -->
---
layout: default
title: Project 1
---<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Project 1</title><link rel="stylesheet" href="{{ '/projects/project1/style.css' | relative_url }}">
</head>
<body><h1>Project 1</h1><p>This is a description of Project 1.</p><!-- You can include images, videos, or other media here --><img src="{{ '/projects/project1/screenshot.png' | relative_url }}" alt="Project 1 Screenshot"><script src="{{ '/projects/project1/script.js' | relative_url }}"></script>
</body>
</html>

7. 自定义项目页面样式

在 style.css 文件中，你可以添加自定义样式来美化你的项目页面：

/* projects/project1/style.css */
body {font-family: 'Arial', sans-serif;background-color: #f4f4f4;color: #333;
}.container {width: 80%;margin: auto;overflow: hidden;
}h1 {color: #333;text-align: center;
}img {max-width: 100%;height: auto;
}

通过这些步骤和代码示例，你可以在你的GitHub Pages网站上展示你的项目，并为每个项目创建一个专门的页面。这样，访问者可以更容易地了解和探索你的工作。

查看全文

http://www.mrgr.cn/news/79008.html