270 lines
8.9 KiB
Markdown
270 lines
8.9 KiB
Markdown
---
|
|
title: '[Tutorial] Getting started with Astro-Micro-Academics'
|
|
description: 'Hit the ground running.'
|
|
date: '2024-07-26'
|
|
tags: ['guide', 'tutorial']
|
|
---
|
|
|
|
:exclamation: Also refer to [Old] posts to see examples and changes. Some changes are removed in this version, which are marked.
|
|
|
|
## Install Astro-Micro-Academics
|
|
|
|
Clone the [repository](https://github.com/jingwu2121/astro-micro-academic).
|
|
|
|
```sh
|
|
git clone https://github.com/jingwu2121/astro-micro-academic.git
|
|
```
|
|
|
|
```sh
|
|
cd astro-micro-academic
|
|
```
|
|
|
|
```sh
|
|
npm i
|
|
```
|
|
|
|
Run local server
|
|
|
|
```sh
|
|
npm run dev
|
|
```
|
|
|
|
## Update the Homepage
|
|
|
|
Update your home page in `src/pages/index.astro`.
|
|
|
|
## CV & About
|
|
|
|
Update your CV and About page in `src/pages/cv.astro` and `src/pages/about.astro`.
|
|
|
|
```ts
|
|
const works = [
|
|
{
|
|
company: 'Company A',
|
|
time: '2022-Present',
|
|
job_title: 'Research Scientist',
|
|
location: 'London, UK',
|
|
description: 'Your Notes about the job',
|
|
},
|
|
{
|
|
company: 'Company A',
|
|
time: '2022-Present',
|
|
job_title: 'Research Scientist',
|
|
location: 'London, UK',
|
|
description: 'Your Notes about the job',
|
|
},
|
|
]
|
|
const educations = [
|
|
{
|
|
school: 'University 1',
|
|
time: '2022-Present',
|
|
job_title: 'BEng in Electronic Information Engineering',
|
|
location: 'London, UK',
|
|
description: 'Your Notes about the study',
|
|
},
|
|
]
|
|
```
|
|
|
|
## Social Links
|
|
|
|
Update the social links in `src/components/SocialIcons.astro`, simply replace the `URL`.
|
|
|
|
## Publications metadata
|
|
|
|
Metadata is required for each post. Add a new `publication.md` to automartically add a publication on the website. Publications are sorted by date.
|
|
|
|
```astro
|
|
---
|
|
title: 'Diffusion Models Beat GANs on Image Synthesis'
|
|
description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias earum quod quo repellat blanditiis est iste eos dolorem! Voluptatibus corporis totam sed unde est iusto neque iure natus adipisci omnis.'
|
|
date: '2024-07-26'
|
|
authors: 'John B*, Jon A*, Frank C, John B, Jon A, Frank C'
|
|
paperURL: 'Paper: https://astro-sphere-demo.vercel.app'
|
|
codeURL: 'Code: '
|
|
webURL: 'Web: https://github.com/markhorn-dev/astro-sphere'
|
|
dataURL: 'Data: https://github.com/markhorn-dev/astro-sphere'
|
|
img: '/rupert-cat.gif'
|
|
imgAlt: 'Paper Teaser'
|
|
pub: 'ECCV2024'
|
|
---
|
|
```
|
|
|
|
| Field | Req | Type | Remarks |
|
|
| :--------------------------------- | :-- | :----- | :--------------------------------------------------------------------------------------------------------------- |
|
|
| title | Yes | string | Title of the content. Used in SEO and RSS. |
|
|
| description | Yes | string | Description of the content. Used in SEO and RSS. |
|
|
| date | Yes | string | Must be a valid date string (able to be parsed). |
|
|
| authors | Yes | string | A string seperated by comma. |
|
|
| paperURL, codeURL, webURL, dataURL | Yes | string | A string seperated by ": ". If you don't have a link to add, leave the link part blank, e.g. `codeURL: "Code: "` |
|
|
| img | Yes | string | Path to teaser image. |
|
|
| imgAlt | Yes | string | Description of the image. |
|
|
| pub | Yes | string | The conference or journal |
|
|
|
|
## Blog metadata
|
|
|
|
Metadata is required for each post.
|
|
|
|
```astro
|
|
---
|
|
title: 'Blog Collection'
|
|
description: 'How to add posts to the blog.'
|
|
date: '2024-03-21'
|
|
tags: ['guide', 'tutorial']
|
|
draft: false
|
|
---
|
|
```
|
|
|
|
| Field | Req | Type | Remarks |
|
|
| :---------- | :-- | :------ | :----------------------------------------------- |
|
|
| title | Yes | string | Title of the content. Used in SEO and RSS. |
|
|
| description | Yes | string | Description of the content. Used in SEO and RSS. |
|
|
| date | Yes | string | Must be a valid date string (able to be parsed). |
|
|
| tags | Yes | list | A list of strings |
|
|
| draft | No | boolean | If draft: true, content will not be published. |
|
|
|
|
## Customize the website metadata and set up RSS
|
|
|
|
To change the website metadata, edit `src/consts.ts`.
|
|
|
|
```ts
|
|
// src/consts.ts
|
|
|
|
export const SITE: Site = {
|
|
TITLE: 'Astro Micro Academics',
|
|
DESCRIPTION: 'Astro Micro Academics is for academic user.',
|
|
EMAIL: 'youremial@gmail.com',
|
|
NUM_POSTS_ON_HOMEPAGE: 2,
|
|
NUM_PUBLICATIONS_ON_HOMEPAGE: 3,
|
|
SITEURL: 'https://astro-micro-academic.vercel.app', // Update here to link the RSS icon to your website RSS
|
|
}
|
|
```
|
|
|
|
| Field | Req | Description |
|
|
| :--------------- | :-- | :--------------------------------------------------- |
|
|
| TITLE | Yes | Displayed in header and footer. Used in SEO and RSS. |
|
|
| DESCRIPTION | Yes | Used in SEO and RSS. |
|
|
| EMAIL | Yes | Displayed in contact section. |
|
|
| NUM_POSTS | Yes | Limit number of posts on home page. |
|
|
| NUM_PUBLICATIONS | Yes | Limit number of research on home page. |
|
|
| SITEURL | Yes | Your website URL |
|
|
|
|
### RSS Post
|
|
|
|
Please tag the post of RSS feed with tag `"rss-feed"`, other posts are not included in the RSS.
|
|
|
|
---
|
|
|
|
## Custom metadata for highlighted author in your paper
|
|
|
|
```ts
|
|
// src/consts.ts
|
|
|
|
export const HIGHLIGHTAUTHOR = 'John B'
|
|
```
|
|
|
|
## Customize metadata for individual pages
|
|
|
|
```ts
|
|
// src/consts.ts
|
|
|
|
export const HOME: Metadata = {
|
|
TITLE: 'Home',
|
|
DESCRIPTION: 'Astro Micro is an accessible theme for Astro.',
|
|
}
|
|
|
|
export const BLOG: Metadata = {
|
|
TITLE: 'Blog',
|
|
DESCRIPTION: 'A collection of articles on topics I am passionate about.',
|
|
}
|
|
|
|
export const RESEARCH: Metadata = {
|
|
TITLE: 'Publications',
|
|
DESCRIPTION:
|
|
'A collection of my publications with links to paper, repositories and live demos.',
|
|
}
|
|
|
|
export const CV: Metadata = {
|
|
TITLE: 'CV',
|
|
DESCRIPTION: 'your cv',
|
|
}
|
|
|
|
export const TAGS: Metadata = {
|
|
TITLE: 'TAGS',
|
|
DESCRIPTION: 'blog tag filter',
|
|
}
|
|
|
|
export const ABOUT: Metadata = {
|
|
TITLE: 'ABOUT',
|
|
DESCRIPTION: 'A self-intro',
|
|
}
|
|
```
|
|
|
|
| Field | Req | Description |
|
|
| :---------- | :-- | :--------------------------------------------- |
|
|
| TITLE | Yes | Displayed in browser tab. Used in SEO and RSS. |
|
|
| DESCRIPTION | Yes | Used in SEO and RSS. |
|
|
|
|
---
|
|
|
|
## Deploy the site
|
|
|
|
To set up RSS and Giscus, it's easier if the site is deployed and has a URL for you to use. Instantly deploy to Vercel or Netlify by clicking the buttons below.
|
|
|
|
<div class="flex gap-2">
|
|
<a target="_blank" aria-label="Deploy with Vercel" href="https://vercel.com/new/clone?repository-url=https://github.com/trevortylerlee/astro-micro">
|
|
<img src="/deploy_vercel.svg" />
|
|
</a>
|
|
<a target="_blank" aria-label="Deploy with Netlify" href="https://app.netlify.com/start/deploy?repository=https://github.com/trevortylerlee/astro-micro">
|
|
<img src="/deploy_netlify.svg" />
|
|
</a>
|
|
</div>
|
|
|
|
To deploy manually see [Astro's docs](https://docs.astro.build/en/guides/deploy/).
|
|
|
|
To deploy to Github, see [here](https://docs.astro.build/en/guides/deploy/github/).
|
|
|
|
## Set up Giscus (from Astro Micro)
|
|
|
|
Follow the steps at [giscus.app](https://giscus.app). Once you get your custom Giscus script from that site, go to `Giscus.astro` and replace that script with your own.
|
|
|
|
```js
|
|
// src/components/Giscus.astro
|
|
|
|
<script
|
|
is:inline
|
|
src="https://giscus.app/client.js"
|
|
data-repo="trevortylerlee/astro-micro"
|
|
data-repo-id="R_kgDOL_6l9Q"
|
|
data-category="Announcements"
|
|
data-category-id="DIC_kwDOL_6l9c4Cfk55"
|
|
data-mapping="pathname"
|
|
data-strict="0"
|
|
data-reactions-enabled="1"
|
|
data-emit-metadata="0"
|
|
data-input-position="top"
|
|
data-theme="preferred_color_scheme"
|
|
data-lang="en"
|
|
data-loading="lazy"
|
|
crossorigin="anonymous"
|
|
async
|
|
></script>
|
|
```
|
|
|
|
To change the Giscus themes used, edit the `setGiscusTheme` function in `Head.astro`.
|
|
|
|
```js
|
|
// src/components/Head.astro
|
|
|
|
const setGiscusTheme = () => {
|
|
const giscus = document.querySelector('.giscus-frame')
|
|
|
|
const isDark = document.documentElement.classList.contains('dark')
|
|
|
|
if (giscus) {
|
|
const url = new URL(giscus.src)
|
|
// Change "dark" and "light" to other Giscus themes
|
|
url.searchParams.set('theme', isDark ? 'dark' : 'light')
|
|
giscus.src = url.toString()
|
|
}
|
|
}
|
|
```
|