Converted from doc(x) by doc2md
Posted on 21st May 2026 at 01:54 by Admin
Experiment with Astro → GitHub → Cloudflare web deployment
~/winxp/projects/astro-test
GitHub: ncvp/astro-test
Cloudflare: cornett1610@gmail.com
Web: astro-test.ncvp.me
See also
Contents
Create astro-test.ncvp.me subdomain.
Add CNAME record specified by Cloudflare. Host name - astro-test, Points to - astro-test-8ol.pages.dev
Delete all other DNS records. IONOS may leave a spurious A record.
Create ncvp/astro-test private repo.
Connection between Cloudflare and GitHub is automatically achieved when setting up Cloudflare.
Connection between local PC and GitHub
% git remote add origin git@github.com-ncvp:ncvp/astro-test
There were some subtleties in setting up the project.
The project is ‘Pages’ not ‘Workers’. Dashboard should hav a url like this dash.cloudflare/…/pages/view/… AI said this was required for simple DNS change from IONOS which didn’t affect anything other than astro-test.ncvp.me
Build settings: Build command - npm run build, Build oputput directory - /dist
Basic
% cd ~/winxp/projects
% npm create astro@latest
Where install: ./astro-test
Start with basic, helpful starter project
Initialise a new Git repository: yes
Extensions
% npm install @fancyapps/ui
% npx astro add mdx
Git
% cd astro-test
% git remote add origin git@github.com-ncvp:ncvp/astro-test
% git branch -M main
% git commit -m “Initial Astro setup”
% git push -u origin main
Shows state in browser as it is modified
% cd ~/winxp/projects/astro-test
% npm run dev
Prepare site for production
% cd ~/winxp/projects/astro-test
% npm run build
Leave out
Preview build locally before deploying
% cd ~/winxp/projects/astro-test
% npm run preview
% cd ~/winxp/projects/astro-test
% git push -u origin main
Follow this Astro doc
Nothing happens locally. Possibly because it hasn’t been built yet by Cloudflare.
fancyapps.com/fancybox/api/options
Options difficult to find. Ask AI
Install with npm
% cd ~/winxp/projects/astro-test
% npm install @fancyapps/ui
Add
<script>
import { Fancybox } from “@fancyapps/ui”;
import “@fancyapps/ui/dist/fancybox/fancybox.css”;
Fancybox.bind(“[data-fancybox]”, {});
</script>
to end of <body> in Layout.astro
It can also be installed via its CDN, but why would one?
Export all content from WP site to ~/winxp/projects/wordpress/export/xxxx
% npx wordpress-export-to-markdown # Invokes wizard
GitHub page
Options:
Quite a few images in gallery 3 from several-galleries were not downloaded.
They were in the XML file, but the tool did not download them.
Lots of them had a localhost URL in their <guid> tags. Even when I changed these strings to the correct site url and reran the tool it still missed the images.
Construct gallery HTML with
% wp_gall_ext xml-file-path
% md ~/winxp/projects/astrojs
% mv ~/winxp/projects/astro-test ~/winxp/projects/astrojs/astro-test
% cd ~/winxp/projects/astrojs/astro-test
% npm run dev # Worked normally
% git push -u origin main # Worked normally
Browse https://astro-test.ncvp.me # Worked normally
Create GitHub private repo ncvp/astro-blog
% cd ~/winxp/projects/astrojs
% npm create astro@latest
./astro-blog, blog template, create Git repo
% cd astro-blog
% git remote add origin git@github.com-ncvp:ncvp/astro-test
% git branch -M main
% git commit -m “Initial Astro setup”
% git push -u origin main
% npm install @fancyapps/ui
Cloudflare
Had to configure GitHub to allow connection to ncvp/astro-blog
Build settings: Build command - npm run build, Build oputput directory - /dist
IONOS
Create astro-blog.ncvp.me
Create CNAME record as specified by Cloudflare. All other records deleted automatically.
Remove toolbar at bottom of screen
Add devToolbar: {enabled: false}, to astro.config.mjs
This is Astro’s term for mapping site-url/slug to page file.
Astro routing reference is not very helpful with specifics
Basics
Fairly obvious
site-url/xxxx → project/src/pages/xxxx.astro, or xxxx.md
Slightly subtle
site-url/xxxx/→ project/src/pages/xxxx/index.astro, or xxxx.md
Confusing in the sitemap. Don’t use index.yyyy except where required, ie src/pages/index.astro
Blog
Individual posts are xxxx.md files in src/content/blog accessed via site-url/blog/xxxx.
This scheme can presumably be extended if we get thousands of posts, but it should be good enough for me.
Lists
site-url/blog list all posts
site-url/blog/category/xxxx lists all posts in category xxxx.
This is done
Similarly author.
Tags could be implemented in the same way.
All missing url’s come here. There’s supposed to be a mechanism for routing site-url/blog/category/invalid-slug to […category], for example, but Gemini couldn’t get it too work.
It’s quite easy to get 404.astro to deal with obvious stale links and mis-typings, and this is actually a better solution.
I thought initially that this would not be possible with a static site, but Astro has an ingenious solution.
At build time it generates a compact index which the client only downloads if the search box is clicked.
% npm install fuse.js
The only website of mine that has real data is ncvp.co.uk/ngarden, and the connections with local WP site and Leaflet plans pages make it rather unsuitable.
echoandnarcissus.co.uk is a good candidate. It doesn’t have an ssl certificate, so would benefit with Cloudflare deployment. It’s completely static anyway. SEO could be tried. Possible route:
-
Move coral.ncvp.net/echo-orig to ncvp.me/echo
-
Develop astro-echo.ncvp.me
-
Point echoandnarcissus.co.uk → Cloudflare
Rebuild
% npm run build # Full rebuild for production using cache
% npx astro build —force # Clears cache before production build
% npx astro dev —force # Starts dev server bypassing the cache
% npx astro —version
Gallery component works well, including single image galleries
Follow this Astro article
Create src/pages/wpress.astro and src/pages/posts/[slug].astro in astro-test project. That works for posts, but doing the same for pages will interfere with the existing pages. Create a new project astro-wpress.
Special pages
| / | Home. Must be provided as src/pages/index.astro |
| /sitemap | WP page rendered by shortcode. Astro page urls all point to https://ncvp.me/wp. Not easily replaced ‘cos my src/pages/sitemap is built by traversing tree of real files. |
| /blog | Replacement src/pages/blog.astro seems to hide WP blog, whose urls are wrong anyway. |
| 404 | Replacement src/pages/404.astro |
| /select-posts | Block page |
| /category/category-name | Not a WP page. Will need to be constructed |
| /tag/tag-name | |
| /author/author-name |
Special routing
/src/pages[…path].astro
% cd astro-project-root
% npx astro add mdx
Remove endpoint from built site
Sometimes it’s useful to have files like src/pages/all-pages.astro which are used in development but shouldn’t be part of the final site.
Change this line in /package.json
{
…
“scripts”: {
…
“build”: “astro build && rm -rf dist/all-pages”,
…
},
…
}
Presumably this will also affect the build that Cloudflare does.
% tree . -dq —gitignore
.
├── public
├── scripts
└── src
├── assets
├── components
├── data
├── layouts
├── pages
│ ├── author
│ ├── category
│ ├── tag
│ └── [year]
├── styles
└── utils
Possibly need for favicon
scripts
Node.js scripts ‘outside’ Astro. eg get-menu.mjs which gets the menu in location header in astro-wpress
src/assets
Gemini recommends this should be used for ‘almost everything’
import alias @assets is set to point here
src/data
Where I keep all the menu definition files, including the ouptu of get-menu.mjs in astro-wpress
src/styles
Global astro-wpress.css in astro-wpress
src/utils
Helper JS utilities used in various Astro components
astro-blog
Works as supplied in blog template.
Useful reference.
astro-wpress
Some subtleties, particularly in /src/pages/rss.xml.js due to the fact that this is a front end to a headless WP site.
% npm install @astrojs/rss
Configure site url in /astro.config.mjs
export default defineConfig({
…
site: ‘https://astro-wpress.ncvp.me\’,\
…
});
Create /src/pages/rss.xml.js
Add to <head> in Layout.astro:
<link rel=“alternate” type=“application/rss+xml” title=“astro-wpress.ncvp.me” href={`${Astro.site}rss.xml`} />
% npx astro add react
First needed for Gemini supplied MDX test page
Create new subdomain at IONOS
In Cloudflare add the new custom domain to the Workers & Pages project
In Astro update the domain name in /astro.config.mjs
Change the site title in Header.astro
Change the url in src/pages/rss.xml.js
Gemini says I can keep old domain in Cloudflare and set up a Bulk Redirect, but I don’t need this with a new test site. Delete astro-blog.ncvp.me from CloudFlare and IONOS