A fully responsive, modern website template designed for academic researchers to showcase their research, publications, and accomplishments. This template is perfect for creating a personal academic website to share your work with the world.
- Responsive Design: Adapts to different screen sizes.
- Easy to Customize: Well-commented CSS for easy edits.
- Modern Look: Clean and minimal design for academic profiles.
- Includes: About page (
index.html
), Research page (research.html
), Publications page (publications.html
), Gallery page (gallery.html
).
-
Fork the Repository
- Click the Fork button in the top-right corner of this page to create your own copy of the repository.
-
Clone the Repository
- Use Git to clone the repository to your local machine:
git clone https://github.com/your-username/ScholarSite.git
- Use Git to clone the repository to your local machine:
-
Open the Project in VS Code
- Open Visual Studio Code, and then open the project folder.
- To open a terminal in VS Code, press `Ctrl + `` (backtick).
-
Make Changes to Your Site
- Edit the HTML files (
index.html
,research.html
,publications.html
,gallery.html
) and CSS files to add your own content and style. - The CSS is already structured and commented for easy customization. You can modify the
index.html
for your profile,research.html
for your research work, etc.
- Edit the HTML files (
-
Test Your Site Locally
- You can test the website on your local machine by opening
index.html
in your browser. - Alternatively, you can use a Live Server extension in VS Code to automatically refresh changes.
- You can test the website on your local machine by opening
-
Push Changes to GitHub
- Once you're happy with your changes, commit and push them to your GitHub repository:
git add . git commit -m "Customizing the academic website" git push origin main
- Once you're happy with your changes, commit and push them to your GitHub repository:
You can host your website for free using GitHub Pages, and by following the steps below, your website will be accessible directly at https://your-username.github.io
.
-
Rename the Repository (Optional but Recommended)
- Go to your repository on GitHub.
- Click on
Settings
. - Scroll to the Repository name section and rename the repository to match your GitHub username.
- For example, if your GitHub username is
janedoe
, rename the repository tojanedoe
. - This will allow your website to be live at
https://your-username.github.io
(e.g.,https://janedoe.github.io
).
-
Enable GitHub Pages
- Go to your repository on GitHub.
- Click on
Settings
>Pages
. - Under the "Source" section, select the
main
branch and click Save.
-
Access Your Website
- After a few minutes, your website will be live at
https://your-username.github.io
. - You can now share your website URL with others!
- After a few minutes, your website will be live at
This website template is made up of four main HTML pages:
index.html
: This is the About page, where you can include your bio, profile picture, and links to social media or professional profiles.research.html
: Showcase your research projects with detailed descriptions, images, and links to papers.publications.html
: A page to list all your published works with links to their full text or abstract.gallery.html
: A photo gallery page where you can include images of your research, events, or personal photos.
- The CSS is fully commented and divided into sections for easy understanding.
- You can modify the styles in the
style.css
file, which controls the layout, fonts, and colors for all pages.
- Visual Studio Code - A powerful, free code editor.
- Git - A version control system to manage and push your changes.
-
Clone the Repository
- In VS Code, open the Command Palette (Ctrl + Shift + P), and type
Git: Clone
. - Paste your repository URL (from GitHub).
- In VS Code, open the Command Palette (Ctrl + Shift + P), and type
-
Open Files and Make Changes
- Once cloned, open the folder in VS Code and start editing
index.html
,style.css
, etc.
- Once cloned, open the folder in VS Code and start editing
-
Using Live Server to Preview
- Install the Live Server extension for VS Code to see changes in real-time.
- Right-click on
index.html
and selectOpen with Live Server
.
Feel free to contribute to this project by submitting pull requests for enhancements or bug fixes. Fork the repository, make your changes, and submit a PR!
This project is licensed under the MIT License - see the LICENSE file for details.