OPEN web
🎨 1. Define the New Design and Style Guidelines
- Audit the current design (visual flaws, UX issues).
- Define a new visual identity:
- Color palette, typography, spacing, layout rules
- Icons, image styles, button styles, light/dark theme
- Create a design system (Figma or similar).
- Decide between using a UI kit or building custom components.
✅ 2. Audit the Existing Site Content and Structure
- List all content types:
- Static pages (Markdown, HTML)
- Blog posts
- Jupyter notebooks
- Media and static assets
- Review current features (tags, categories, plugins).
- Map out the current site navigation and URL structure.
🗂️ 3. Design the New Site Architecture
- Define top-level sections (e.g. Home, Blog, Notebooks, About, Resources).
- Map how content will be grouped:
- Where to place notebooks?
- Will blog posts and notebooks be cross-linked or separate?
- Should there be categories or tags?
- Design the new URL structure:
- Use clean, SEO-friendly, logical URLs (e.g.
/notebooks/topic-name/
,/blog/year/title/
) - Sketch the navigation system:
- Main menu, footer links, sidebars if needed
- Define where dynamic behavior may be needed (filters, pagination, search, etc.)
- Plan the integration of Sphinx documentation:
- Ensure the documentation is easily accessible from the main navigation.
- Decide whether to embed or link to the Sphinx-generated site.
🚀 4. Set Up the Astro Project
- Initialize a new Astro project.
- Install required integrations (MDX, Tailwind).
- Prepare folders based on the planned site structure.
🔄 5. Migrate Content from Pelican
For Markdown and HTML
- Export and clean content, convert metadata to frontmatter.
- Match content placement with the new architecture.
For Notebooks
- Convert
.ipynb
files to Markdown or embed them. - Clean and adapt content for Astro styling.
**For Sphinx Documentation
- Sync the existing Sphinx documentation.
- Customize its styling to align with the new site design.
- Integrate it into the site architecture (embed or link).
🧱 6. Implement Layouts and Components
- Build the site layout(s) based on the new structure and design.
- Create reusable UI components.
- Apply the style guide across all templates and components.
⚙️ 7. Configure GitLab Pages Deployment
- Write
.gitlab-ci.yml
to handle Node + Astro build. - Ensure that the site is published from the
dist/
directory. - Deploy and test on GitLab Pages.
🔍 8. Quality Assurance & Accessibility
- Run audits (Lighthouse).
- Test all screen sizes.
- Verify rendering of converted notebooks.
- Add proper metadata and optimize assets.
- Test the accessibility and presentation of the Sphinx documentation.
📈 9. Optional Improvements
- Add full-text search.
- Enable RSS feeds.
- Integrate a headless CMS.
- Enable interactivity in notebooks if needed.