Rand Docs

Introduction

Since this is a Ghost theme documentation, you are assumed to have a basic knowledge of the Ghost CMS.

If you're starting with Ghost, it is best to see the guides in the official Ghost Help Center – check this out, and you'll have all the available information.

Getting Started

Welcome

The Rand theme concept is built for flexibility and easy customization. It leverages existing Ghost features of tags & pages to help you customize your own Ghost site from the Ghost admin interface. Rand is a minimalist magazine meets personal portfolio theme designed for clean, elegant content presentation.

The theme offers these key features:

• Customizable homepage with multiple section components
• Landing page builder using section components
• Resource template for useful listings
• Blog template with horizontal tag navigation
• Linktree-like template for featured links
• Series template for linear reading experiences
• Event calendar
• Light and dark mode
• Beautiful color presets
• Multiple blog posts layouts with table of content support
• About page template for personal profiles
• Rotating gallery section for visual showcases

Install Theme

Upload Zip File

To begin, unzip the downloaded package by double-clicking it on a Mac or by right-clicking and selecting "Extract All" on Windows.

Inside the new Rand folder, you will find the Rand.zip theme files.

Step-by-Step to Upload the Theme to Your Website

1. Log in to your Ghost website admin (example.com/ghost).
2. Click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Design & branding > Theme > Change theme.
4. Click Upload theme and select the Rand.zip theme file.
5. Once uploaded, click Activate now to activate the theme.

Upload Routes.yaml

The routes.yaml is required if you want to show the following pages:

1. Blog
2. Tags
3. Archive

If you don't want any page above, you can skip this step.

Step-by-Step to Upload the routes file:

1. Unzip the Rand.zip theme file.
2. In your Ghost admin, click the settings icon ( ⚙️ ) at the bottom of the left-hand side.
3. Go to Labs and click Open.
4. Click the Upload routes YAML button.
5. Select and upload the routes.yaml file inside the theme folder.
6. Done.

Import demo content (optional)

Demo content accelerates your theme setup by providing a fully configured example of the theme's capabilities. Instead of building from scratch, you'll have working examples of content structures, internal tags that showcase best practices for your theme's features.

Before importing demo content, export your existing content as a backup.

To import the demo content:

1. Navigate to Settings > Advanced > Import/Export
2. Under Import, upload the  demo-content.json file from your theme directory
3. The demo content includes all pages and posts on the demo site.

To manage demo content:

1. Go to Pages/Posts
2. Filter by the Demo tag
3. Edit or replace the content with your own

The demo content provides a foundation to understand the theme's structure and capabilities. You can modify, remove, or expand upon these sections using the theme's built-in components and layouts.

Import Internal Tags (Optional)

This step is to import all the available tags we will use to create content on the homepage.

After importing tags, you can select them from Ghost admin without worrying about typo mistakes that can cause the theme to not work as expected.

Step-by-Step to Import Internal Tags:

1. In your Ghost admin, go to Settings > Advanced > Import/Export.
2. Under Export, click Export content. This ensures you have a full backup of your current data. Once done, proceed to the next step.
3. Under Import, click Universal import.
4. Select and upload the internal-tags.json file from the unzipped theme folder.
5. Now, navigate to the Tags page within your admin panel to view all available tags under Internal tags.
6. That's all for the theme installation!

General Settings

Colors

The theme supports changing the Accent color and offers different color combinations.

Set Accent Color

The Accent color is the primary color used throughout your publication theme in buttons, social sharing hovers, etc. You can change the theme Accent color from the Ghost admin.

Change the Accent color from the admin Settings > Design & Branding > Customize > Brand > Accent color.

Preset Color Combinations

The theme provides different color combinations. Choose the one that fits your style:

• Default
• Pure
• Onyx
• Rust
• Fossil
• Mint
• Ember
• Ice

Step-by-Step to Choose Your Preferred Color Combination:

1. Change the Accent color from the admin Settings > Design & Branding > Customize > Theme.
2. Click on Color combinations and select your color combination.

Preview and Save.

Color combination options

Light / Dark Mode

You can easily switch between light, dark, system, or user-defined modes directly from your Ghost admin panel.

The theme supports:

• Light
• Dark
• System-based
• User defined

Step-by-Step to Customize

1. Go to Settings > Design & branding > Brand from the admin menu
2. Choose a preferred mode by clicking on Appearance
3. Click Save

Light/dark mode settings

Typography

Depending on the selected option, this setting will change the heading and body text fonts.

Custom Fonts

Ghost provides built-in custom font functionality, allowing users to select heading and body fonts from a curated list directly in the admin interface.

Step-by-Step to Change Fonts:

1. Go to Settings > Design & branding > Customize > Brand
2. Under Typography, select:
   • Title font for headings
   • Body font for main text
3. Click Save

Typography settings

Host your own Fonts

You can change any font from the Ghost admin interface using Code Injection and Google Fonts, or your own font. For example, if you want to use "Inter" and "EB Garamond" fonts from Google Fonts, your code in Code Injection will be:

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&family=Inter:wght@400;700&display=swap" rel="stylesheet">

<style>
  :root {
    --font-base: 'Inter', sans-serif;
    --font-serif: 'EB Garamond', serif;
  }
</style>

You can also use your custom local font by including it in your theme with a code editor. This technique is more advanced but allows you to add 'your own' fonts.

Check out the detailed guide to add your own fonts

Header Navigation

Step-by-Step to Add an Item to Header Navigation:

1. Go to Settings > Navigation > Primary Navigation.
2. Type the page's name in the label field as you'd like it to appear on your menu.
3. Click on the item's URL. The blog URL will already be auto-populated.
4. When satisfied with your page configurations, click the Save button.

Header logo

Header profile displays Publication logo from Settings → Design & branding → Brand

Header Call-to-Action Buttons

You can add your own CTA text and link in the header. If you leave it empty, the button will be hidden.

1. Go to Settings > Design & branding > Theme
2. Scroll to Navigation buttons:
   • Add the text to Header action text. Leave it empty if you want to hide it.
   • Add link to Header action link

Example configurations:

• Contact button:
  • Text: "Contact Us"
  • Link: "/contact"
• External link:
  • Text: "View Pricing"
  • Link: "https://example.com/pricing"

Navigation Dropdown Menus

You can create dropdown sub-menus in your Ghost site navigation to organize your content more effectively and improve site navigation. This feature helps visitors quickly find specific pages under broader categories.

Example of dropdown menu

Follow these steps to set up dropdown navigation menus:

1. In your Ghost Admin panel, go to Settings → Navigation
2. Add your main menu items normally
3. To create submenu items, add them with a dash (-) prefix before the child item
4. Arrange items in the order you want them to appear

Example Settings

White Logo on Dark Mode

If you use a black logo image and enable dark mode, you would need your logo visible when users enable dark mode.

You can use Code injection and insert this CSS to support different logo color on light/dark mode

<style>
:root[data-theme=dark] .gh-head-logo-wrapper img {
    filter: invert(100%);
}
</style>

Footer

Footer navigation example

Like the header, you can add the footer navigation links from the Ghost Admin Settings > Navigation > Secondary

To group footer items into different groups, add # before the name.

Footer navigation groups

Homepage

Homepage sections

The Rand theme is designed for flexibility and easy customization, allowing you to build a dynamic homepage using Ghost's built-in features. You can manage your homepage sections directly from the Ghost admin interface, no coding required!

After uploading the theme and uploading the routes.yaml file, the homepage is up with several default sections including Hero, Gallery, Highlights, and Blog. If they are all you need, you can skip this section.

But if you want to add more sections to the homepage, do follow the guide below.

Homepage Layout Structure

The Rand theme divided into two part: Top and Bottom.

Top part

Including those sections"

• Hero section
• Highlights section
• Home gallery
• Logos section

Bottom part

The bottom part uses a unique two-column layout for the homepage content area:

Left Column (Main Content):

• Contains the main homepage sections like Blog, Showcases, Blocks, and all other available sections listed here.
• Displays the primary content sections configured in your homepage settings

Right Column (Sidebar):

• Contains the subscription box with email signup
• Displays secondary sections like Events and latest Now sections

This layout creates a balanced homepage that emphasizes your main content while providing a dedicated space for subscription and timely information.

How it works

The Rand theme homepage is built from pages that you create in Ghost admin. Each section is controlled by:

1. Special tags - Internal tags that define what type of section it is
2. Configuration setting - Controls which sections actually appear on your homepage
3. Publish dates - Determines the order of sections

List of sections and its slug

Notes on using internal tags:

• In the page editor, find the Tags field and type the tag (e.g., #section-addons)
• You can easily see the pattern between tag name and its slug. Tags with # prefix are added a label hash- before the name
• It only works when the tag is the first one
• Internal tags start with a # and are not visible to visitors, so your site is clean from search engines.

Arrange Section Order

The order of homepage sections is determined by the publish date of each page, older pages show first. To change the order:

1. Go to Pages in Ghost admin.
2. Click on the page of the section page you want to move.
3. In Page settings, adjust the Publish date. Older dates appear first.
4. Click Update to save changes.

Sections Configuration

You can control which sections appear on the homepage from the theme settings.

You can easily add/remove section showings on the homepage. You can do that from Theme's Settings at Settings → Design & branding → Customize → Theme → Homepage sections

Default Section

Homepage sections contains a comma-separated list of section tags that controls what appears on your homepage.

By default, the theme displays Experiences, Testimonials, and Custom Posts in the left column, with permanent Hero, Gallery, Highlights/Logos, and Blog sections.

hash-section-experiences,hash-section-testimonials,hash-section-custom-posts

Note: The Gallery, Highlights, and Logos sections are configured separately and appear in the upper section of the homepage automatically when content is tagged appropriately.

Adding a Section

Add the section tag to the Homepage sections:

hash-section-showcases,hash-section-static-text,hash-section-logos,hash-section-testimonials

↳ Added Testimonials section

Removing a Section

Delete the section tag from the Homepage sections:

hash-section-showcases,hash-section-static-text

↳ Removed Logos section

Home Top Part.

Hero Section

The hero section is permanently set to the top section of the homepage.

The theme supports both simple and extensive text with reveal animation on scroll, giving you more flexibility for your homepage introduction.

Hero section

Default option

By default, the theme shows the Site title and description from General settings in the hero.

Step-by-Step to change default option

1. Log in to your Ghost Admin dashboard.
2. Go to Settings → General settings → Title & description → Edit
3. Edit Site title and Site description to change the content.
4. Save and refresh the homepage

Extensive option

For more extensive hero text with formatting options and animation.

Step-by-Step to use Extensive option

1. Log in to your Ghost Admin dashboard.
2. Click on Pages in the left sidebar.
3. Click New page to create a new page.
4. Add your hero text content in the editor. You can:
   • Format text with bold, italic, or other styles
   • Add multiple paragraphs, headings, images, etc.
   • Include links or other content elements
5. Add the tag #home-intro to the page (important!)
   • Click the settings icon (⚙️) in the top right
   • Go to the "Tags" section
   • Type and select #home-intro
6. To add reveal animation, add the second additional tag #animate to the Tags section
7. Publish the page when you're done.

Example of hero section page settings

Hero Actions

Choosing to show social links, subscription box or just nothing.

Step-by-Step to set hero action

1. Log in to your Ghost Admin dashboard.
2. Go to Settings → Site → Design & branding → Customize
3. Go to Theme tab and find the Homepage section.
4. Locate the Hero actions dropdown, select the option you want
   1. Social links: show the author's Social Links
   2. Subscription form: show the subscription box
   3. None: No action shown
5. Save and refresh the homepage

Hero actions settings

Edit Author Social Links

1. In the Ghost Admin Settings, go to Staff and select the primary author whose social links you want to display. (Note: The primary author is the first author added in the Authors field of the #section-hero page we created above)
2. Add your social profiles (such as Website, Twitter, Facebook, LinkedIn, Bluesky, Threads, Mastodon, TikTok, YouTube, Instagram) in the corresponding fields.
3. Save your changes.

Gallery Section

The gallery section displays a collection of rotating images on your homepage, creating an engaging visual showcase. Each gallery item can optionally link to its content page or external URLs, making it perfect for portfolios, photo galleries, or featured work.

Gallery section on homepage

The gallery automatically creates a rotation effect with images positioned at different angles to create visual interest.

Step-by-Step to Add Gallery Section

1. Create posts with featured images for each gallery item you want to display.
2. Tag each post with #home-gallery (this is an internal tag that won't be visible to visitors).
3. The gallery will automatically display up to 7 posts tagged with this tag.
4. Images are automatically optimized for responsive display.

Gallery Link Settings

You can control whether gallery images are clickable using the theme settings:

1. Go to Settings > Design & branding > Theme > Homepage
2. Find Enable gallery link setting
3. Toggle on/off to enable/disable gallery links
4. Click Save

When gallery links are enabled:

• Posts with a Canonical URL will link to the external URL and open in a new tab
• Posts without a Canonical URL will link to the post page

When gallery links are disabled:

• Images are displayed without clickable functionality
• No titles or arrows are shown
• Creates a purely visual gallery experience

Highlights Section

Display a grid of highlighted or featured content prominently on your homepage. This section is perfect for showcasing your most important work, featured articles, or key offerings. The highlights section displays content in a compact, visually appealing grid format.

Highlights section

Setup Highlights Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage.
3. [⭐️ Important] Add #section-highlights to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting featured,highlights,showcase if you want to show pages that are tagged as Featured, Highlights, Showcase
5. If you want to create separate page showing Highlights content, select Page Collection in Template — the View all link will lead to this page.
6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
7. Publish.

☝️ To find the exact tag slug, go to Tags in the Ghost admin home, click on the tag name, then copy the text in the Slug field.

Add Highlights Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Highlights card anatomy

Blog Feed Section

The blog section will contain the latest posts that you published and a shortcut link to go to the /blog page.

By default, the blog section is shown right under the hero section. You can change the section name in the Settings (Settings → Site → Design & branding → Theme → Home feed title).

But if you want to easily change the order of the blog section to any position, follow these steps:

Step-by-Step to Add the Blog Section

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. From the Page settings, ensure that the Page URL setting is blog. This is the most important step.
4. Publish and open the homepage to check.

Different Post Styles

Rand supports different post styles and different featured image aspect ratios.

You can set your favorite style at Ghost admin > Settings > Design & branding > Theme > Feed layout and Feed image orientation for the post image ratio (Landscape, Square, Portrait).

The post style will be applied across the site, including the homepage, blog, and related posts under the post detail page.

Exclude Posts from Blog Feed on Homepage

Control which posts appear on your homepage feed by excluding specific tags.

Step-by-Step to Exclude Posts

1. Go to Settings > Design & branding > Theme
2. Find Excluded tags
3. Enter tag slugs separated by commas (e.g., internal,draft,private)
4. Click Save

Posts with these tags won't appear in the homepage feed but remain accessible via direct links or tag pages.

Custom Posts Row Sections

Posts row section

This section allows you to display a row of specific posts filtered by a tag on your homepage.

Step-by-Step to Add Posts Row Sections on Homepage

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage.
3. In Page settings, add #section-custom-posts to the Tags input.
4. In Template dropdown, choose Page Collection (This will create a new page showing those posts)
5. Click on X Card and add the tag slug of the posts you want to show in this row on the Homepage. i.e. putting newsletter if you want to show posts that are tagged as Newsletter
6. Publish and preview it on your homepage.

Logos Section

Sometimes you want to show some kind of social proof, and a logo board can help achieve that.

Step-by-Step to Add Logo Board

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the homepage.
3. Upload all logos you want to show on the homepage. Note: Don't add any line breaks above, between, or after the Images. It will create some odd alignment.
4. In the Page Setting sidebar, add a tag named: #section-logos.
5. Publish and check your homepage.

Example of logo section settings

☝️ If you want to hide the section title, add #no-title tag.

Showcase Section

Highlight showcase items, such as portfolio pieces, case studies, or featured projects.

Showcase section

Step-by-Step to Add Showcase Section on Homepage

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-showcase to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific Pages for this section. i.e. putting works if you want to show pages that are tagged as Works
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page.
6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags

Publish.

Now the showcase section is visible on the homepage. Next, to add content for that section.

Add Showcase Items

Showcase items example

Step-by-Step to Add Showcase Items

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as eyebrow sub-header (above the title), and featured image.
3. Tag the page with the tag you used in the X description field in the showcase section page above (e.g. Works)
4. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
5. (Optional) If you want to use the video as the thumbnail, paste the video URL to Facebook card → Facebook description
6. Publish.
7. Repeat the same steps to create different content blocks for the showcase section.

Example of showcase item settings

Change Showcase Layout

For the showcase card, the theme provides some showcase item layout options.

1. Go to Ghost admin > Settings > Design & branding > Theme > Showcase card style
2. Select your choice.
3. Save.

Showcase layout options

Blocks Sections

Display a grid of blocks, such as products, features, or services.

Setup Blocks Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-blocks to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting goods,health,food if you want to show pages that are tagged as Goods, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. 6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
6. Publish.

☝️ To find the exact tag slug, go to Tags in the Ghost admin home, click on the tag name, then copy the text in the Slug field.

Repeat these two steps to create different blocks sections on the homepage. You can have as many resource sections as you want.

Add Blocks Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Resource card anatomy

Blocks Vertical Section

Show blocks in a vertical (column) layout, ideal for books or vertical image lists.

Setup Blocks Vertical Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-blocks-vertical to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting book,health,food if you want to show pages that are tagged as Book, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. 6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags

Publish.

Blocks vertical section settings

Add Blocks Vertical Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Vertical resource card anatomy

Addons Section

Showcase a grid of add-ons, plugins, or resources you want to highlight. Great for listing tools, downloads, or partner products.

Addons section

Setup Addons Section

1. In Ghost admin, create a new page.
2. Give it a title; this title will be shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-addons to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific pages for this section. You can filter multiple tags. i.e. putting book,health,food if you want to show pages that are tagged as Book, Health, Food
5. If you want to create separate page showing Showcase content, select Page Collection in Template — the View all link will lead to this page. 6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags

Publish.

Addons section settings

Add Addons Content

Refer to [Step-by-Step to Add Showcase Items] steps. They work the same way.

Addons card anatomy

Testimonials Section

Display testimonials from your users, clients, or partners.

To add a testimonials section, create a new page, give it a title, then add an internal tag #section-testimonials in the page settings.

Testimonials section

Step-by-Step to Add Testimonial Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-testimonials to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the details:
   • Title is the testimonial main text.
   • Description shows a person's name and job title.
   • Image as a profile picture.
   • Stars as a rating.
6. Add more Product cards to add more testimonials.
7. Publish.

Example of testimonial section settings

Static Text Section

The static text section is useful for adding custom text on the homepage, such as your services, working principles, or values.

Static text section

Step-by-Step to Add Static Text Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-static-text to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

☝️ If you want to hide the section title, add #no-title tag.

Example of static text section settings

If you want to create multiple sections using Static text, create a new page and repeat the same steps above.

Static Banner Section

If you prefer to show static images instead of text, you can use the static banner section.

Step-by-Step to Add Banner Text Section

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-static-banner to the Tags field.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

☝️ If you want to hide the section title, add #no-title tag.

Experiences Section

List your work experiences, milestones, or career highlights.

Work experiences section

Step-by-Step to Add Experiences Section

1. In Ghost admin, create a new Page.
2. Enter the title of the page. This title will be the section title on the Homepage.
3. [⭐️ Important] Add #section-experiences to the Tags input.
4. In the page content, add a new Product card. You can find this card by clicking on the + icon on the left side of the editor or by typing /product in the editor, then select the Product option.
5. On the product card, fill in the title, description, image, and link (optional).
6. Add more Product cards to add more static text cards.
7. Publish.

Example of work experiences section settings

Now Section

Display the latest post tagged as "Now" or any custom tag — perfect for sharing what you're currently focused on.

Now section

Step-by-Step to Add Now Section

1. In Ghost admin, create a new Page.
2. Give it a title; this title will be shown on the homepage.
3. [⭐️ Important] Add #section-now to the Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the post you want to show as the content. This will 'filter' specific pages for this section. i.e. putting now if you want to show pages that are tagged as Now
5. If you want to create separate page showing Showcase content, select Page Now in Template — the View all link will lead to this page. 6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags

Publish.

Example of now section settings

Now you need to add Now content:

Step-by-Step to Add Now Content

1. In the Ghost admin page, go to Posts > click on New posts.
2. Give it any title and add your content (Now section won't display Post title)
3. Tag the posts with the tag you used in the X description field in the Now section page above (e.g. Now)
4. Publish.
5. Repeat the same steps to create different content blocks for the showcase section.

The latest post tagged with "Now" will be displayed in this section.

Now content example

Custom Content Section

This section allows you to display any custom content of a specific page on the homepage.

Content block section

Step-by-Step to Add Custom Content Section

1. In Ghost admin, create a new Page.
   1. Give it a title; this title won't be shown on the homepage.
2. Add #section-custom-content to the Tags input.
3. Publish.

Example of content block section settings

Event Calendar Section

This section shows a list of upcoming events with dates.

Event calendar section

Step-by-Step to Add Event Calendar Section

1. In Ghost admin, create a new page.
2. Give it a title, any name. This title will be the title shown on the homepage and the blog page.
3. [⭐️ Important] Add #section-events to Tags input.
4. [⭐️ Important] Click on X Card → X description field, add the tag slug of the page you want to show as the content. This will 'filter' specific Pages for this section. i.e. putting event if you want to show pages that are tagged as Event
5. If you want to create separate page showings Showcase content, select Page Collection in Template — the View all link will lead to this page.
6. View all link options
   1. By default, View all will link to that separate page
   2. If you want it to lead to a different page, add the new URL in Meta data → Canonical URL
   3. If you want to hide it, add #no-title to the Tags
7. Publish.

Example of event calendar section settings

Now you need to add Event content:

Event content example

Step-by-Step to Add Event Content

1. In the Ghost admin page, go to Pages > click on New page.
2. Enter information for this project. Page title as the title, Excerpt as the project description, X description as eyebrow sub-header (above the title).
3. Choose event dates by using the Publish date. Since Ghost doesn't support future dates, use this data to display event dates. We only show the date and month, so to show a "future date", use the date from the past year. Example: today is Jul 29, 2025. You have an event in Aug 2, 2025. To show that date, select Aug 2, 2024 as the Publish date.
   • If you upload a feature image, it will replace the date as the thumbnail.
4. Tag the page with the tag you used in the X description field in the Event page above (e.g. Event).
5. (Optional) If you want to lead visitors to an external site, add the URL at Metadata > Canonical URL. By default, the link will lead to the Page detail.
6. Publish.

Repeat the same steps to create different content blocks for the showcase section.

Event card anatomy

Other Customizations

Hide Section Title

If you want to hide the section title, add #no-title to the Tags input.

Hide Section Link

If you want to hide the link section, add #no-link to the Tags input.

Other Pages

Blog Page

A blog page displays all your posts in Ghost.

Blog page example

☝️ Important: Ensure you upload the routes.yaml file.

If you've already created a blog section on the homepage, you can skip this step to create a blog page.

Step-by-Step to Create the Blog Page:

1. In the Ghost admin page, go to Pages > click on New page.
2. Add a title (e.g., 'Blog').
3. Add a description or feature image for this page (optional). If you want to add a video, add the video URL to Facebook card > Facebook description
4. Click the icon in the top right corner to open the Page settings.
5. Ensure the Page URL is blog.
6. Click Publish.

Now you have a blog page with the URL yourblog.com/blog.

Blog Category Navigation

By default, the blog category navigation shows the top 5 tags sorted by the number of posts for each tag. You can also define which tags you want to display in the header.

Blog category header

Step-by-Step to Add Custom Items on the Category Header

1. From Ghost admin, go to Settings > Design & Branding > Theme.
2. In Blog category navigation, enter the slugs for each tag, separated by commas without any whitespace (e.g., design,code,mindset).
3. Click Save.

Example of blog category settings

Collection Template

This template lets you create a custom page that shows your own content at the top, followed by a section that automatically displays all pages tagged with one or more tags you specify.

This is perfect for building a focused collection, such as a resource list, a collection of case studies, or a single-topic showcase.

Collection template example 1

Step-by-Step to Create a Collection Page:

1. Create a new page in Ghost admin (Pages > New page).
2. Add your main content in the editor. This will appear at the top of your landing page.
3. In the Page settings (top right corner):
   • Tags: Use one of those tags to set the style for the content item: #section-addons, #section-blocks, #section-blocks-vertical
   • Template: Select Page Collection from the Template dropdown.
   • Twitter Description: Enter one or more tags (comma-separated) you want to show for the section below your main content. For example, entering resources,downloads will show all pages tagged with either resources or downloads.
4. (Optional): You can set the Page access to public or Member only to define who can see the collection.
5. Publish your page.

You can create as many collections as you want with the same steps.

Collection page settings

Landing Page Template

This template lets you create a custom page that shows different sections like we show on the home page.

This is perfect for building focused landing pages, such as a resource list, a collection of case studies, or a multi-topic showcase.

Landing page template example

List of applicable sections and its slug for Landing Page Template

Step-by-Step to Create a Landing Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add your main content in the editor. This will appear at the top of your landing page.
3. In the Page settings (top right corner):
   • Template: Select Page Landing Page from the Template dropdown.
   • Twitter Description: Enter one or more tags (comma-separated) of sections you want to show. For example, entering hash-section-addons,hash-section-blocks will show two sections that the pages tagged with either hash-section-addons or hash-section-blocks.
4. (Optional): You can set the Page access to public or Member only to define who can see the collection.
5. Publish your page.

You can create as many collections as you want with the same steps.

Landing page settings

Timeline Template

Timeline shows content of posts filtered by tags.It shows the newest posts first. It's ideal for showing your milestones by time for timelines.

Timeline template example

Step-by-Step to Create a Timeline Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "My Timeline" or the name of your collection).
3. Add an introduction or overview in the content editor (optional).
4. In Page settings:
   • Set the Template to Page Timeline or Page Timeline Minimal. Timeline Minimal will show the feature image and the excerpt of the post, while Timeline shows the whole content of the post.
   • In X Description, enter the tag slug that all posts in your series will use (e.g., timeline).
5. Publish your page.
6. Tag each post you want to include in the timeline with the same tag you entered in X Description.

Following these steps, the page will display all the posts tagged as timeline and sort them by publish time, newest first.

Timeline page settings

About Page Template

The About page template is specifically designed for creating compelling personal or company about pages. It features a unique layout that combines your content with a portrait image and social links, perfect for profiles.

About page template example

Step-by-Step to Create an About Page

1. Create a new page in Ghost admin (Pages > New page).
2. Add your title, excerpt and featured image
3. Add your main content in the editor - this will appear in the left column.
4. In Page settings:
   • Set the Template to Page About from the Template dropdown.
   • (Optional) In Twitter Description, add tags to include dynamic content sections from other pages.
5. Add author information - the template automatically displays social links for the first author added to the page.
6. Publish your page.

About page settings

Adding Social Links

The About template automatically displays social media links for the page's author:

1. Go to Settings > Staff in Ghost admin.
2. Select the author whose social links you want to display.
3. Add social media URLs in the corresponding fields (Website, Twitter, Facebook, LinkedIn, etc.).
4. Save your changes.

The social links will appear vertically aligned below the portrait image.

Dynamic Content Sections

You can add additional content sections to your About page using internal tags:

1. In the Twitter Description field, enter tags of sections you want to include (e.g., hash-section-experiences,hash-section-testimonials).
2. Create separate pages tagged with these internal tags.
3. The content from these tagged pages will automatically appear in your About page.

This allows you to create rich About pages that include testimonials, work experience, or other structured content.

Now Template

Now is a nice place for you to show what this person is focused on at this point in their life.

It's inspired by nownownow.com projects. But we treat it differently by showing the whole history of the page, not just the latest update.

Now template example

Step-by-Step to use Now template

1. Create a new page in Ghost admin (Pages > New page).
2. Add a title (e.g., "Now" or the name of your collection).
3. In Page settings:
   • Set the Template to Page Now.
   • In X Description, enter the tag slug that all posts in your series will use (e.g., now).
4. Publish your page.
5. Tag each post you want to include in the Now page with the same tag you entered in X Description. The Now Template doesn't show individual post titles

Following these steps, the page will display all the posts tagged as now and sort them by publish time, newest first.

Post Templates

The theme provides different post templates:

1. Default
2. Wide featured image
3. Full featured image
4. No featured image
5. Split
6. Split reverse

To choose which template to use when you publish a post:

1. In the post editor page, click the icon in the top right corner to open the Post settings.
2. Find the Template selector and choose the style you want for your post.

Post Page Options

The theme supports other customizations:

1. Hide/Show author
2. Hide/Show social sharing buttons

Step-by-Step to Customize Post Options

1. Go to Settings > Design & branding > Theme > Post
2. Toggle on/off each option to show/hide them from the Post page
3. Click Save

Contact Page

To provide a way for your readers to contact you, create a contact page using Formspree.

Step-by-Step:

1. Create a new page and give it a title (e.g., 'Contact').
2. Add a feature photo (optional) and choose a layout from the Template option.
3. Choose any template; a special template named "Page" is available under the template option. You can choose any other template as well.
4. Add your content and the contact form code using Formspree. See the code example below.
5. Click Publish.
6. To add the page to the navigation, refer to the Navigation section.

<form id="fs-form" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/f/{your_form_id}" method="post">
  <fieldset id="fs-form-inputs">
    <label for="full-name">Your name</label>
    <input type="text" name="name" id="full-name" placeholder="e.g. John" required>
    <label for="email-address">Email address</label>
    <input type="email" name="_replyto" id="email-address" placeholder="[email protected]" required>
    <label for="message">Message</label>
    <textarea rows="9" name="message" id="message" placeholder="Your message…" required></textarea>
    <input type="hidden" name="_subject" id="email-subject" value="Contact Form Submission">
  </fieldset>
  <input type="submit" class="button button-primary" value="Send">
</form>

Dark Page

Besides supporting a light/dark theme for the entire website, this theme allows setting specific pages to dark mode.

For instance, if your default theme is light, but you want certain pages (e.g., Gallery page) to be dark, you can achieve this.

Step-by-Step:

1. In the Ghost admin, go to any page or post you want to set to dark mode.
2. Open the Page/Post settings panel.
3. In the Tags input, add the tag #dark.
4. Click Update.

Custom Settings

Table of Content

You can add a table of contents (TOC) to any post. Add this HTML code to your post.

<aside class="toc-container">
    <div class="toc-sidebar">
        <h4>On this page</h4>
        <div class="toc"></div>
    </div>
</aside>

Step-by-Step

1. Create a new post and write your post
2. Right under the title, add an HTML card
3. Insert the code above. You might want to change the TOC's header text. Maybe you call it Table of Contents.
4. Publish and review it

Note: If you don't want a title (e.g., On this page), remove it from the HTML code you see above.

Posts Per Page

By default, the homepage, author's, and tag's page display a maximum of 12 posts per page, but you can change this number.

Step-by-Step

1. You'll need to open the theme's package.json file in your code editor and find the following:

"config": {
    ...
    "posts_per_page": 12
    ...
}

1. Change the value of the 12 to the expected value.
2. Save your package.json file in root folder.

Google Analytics

To integrate Google Analytics, I recommend using the Google Analytics integration by Ghost.

Syntax Highlighting

You can add a fenced code block by placing triple backticks ``` before and after the code block. For example:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following gray look:

To highlight a code block, add a language alias like css or js to the code block. For example, the CSS code in the previous example will wrap between ```css and ``` as follows:

pre {
  background-color: #f4f4f4;
  max-width: 100%;
  overflow: auto;
}

This will produce the following colored look:

To add inline code, wrap the text between two backticks "`".

Prism

The theme ships with Prism.js, a lightweight, robust, and elegant syntax highlighter.

The initial Prism package includes some languages, like Markup, CSS, C-like, and JavaScript.

You can add support for more languages by adding the Prism autoloader script, which will automatically load the languages you need. Add the following script to the website admin Code Injection (Site Footer) to do this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-fTl/qcO1VgvKtOMApX2PdZzkziyr2stM65GYPLGuYMnuMm1z2JLJG6XVU7C/mR+E7xBUqCivykuhlzfqxXBXbg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Click Save.

Responsive Tables

The responsive table will display a horizontal scroll bar if the screen is too small to display the full content. The following description applies to the table added using the markdown card.

By default, the table adapts to the window width. If you have a table that is too wide, it will display a horizontal scroll bar when needed.

Step-by-Step

1. To add a responsive table, use the Markdown card.
2. Add the markdown to create a table. To generate a table, you can use the tool Markdown Tables Generator. Below is an example

| # | Heading | Heading | Heading | Heading | Heading |
|:--|:--------|:--------|:--------|:--------|:--------|
| 1 | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell |

Subscription is placed at the bottom of the post page and on the homepage next to the Latest post area.

You can change the subscription box's title from the Ghost Admin.

Two subscription boxes use the same copy. When you change the text, it will change in both places.

Step-by-Step

1. Go to Settings > Design & branding > Homepage in Ghost Admin
2. Change the copy in Email signup text input.
3. Finally, click Save.

The theme comes with Ghost Native Comments integration. You can turn the comments on from your Ghost admin Settings > Membership > Access > Edit > Commenting.

Languages

The theme is fully translatable by enabling a publication language in the settings of the Ghost Admin. Before that, you must prepare your language file.

Step-by-Step

1. Inside the ../locales/ folder, add target language files for each translatable language used on your site. For example, fr.json is for French, and pl.json is for Polish. code must be used.
2. Translate the sentences used in the theme inside your new language files, for example, in en.json:

{
    "Subscribe": "Subscribe",
    "Sign in ": "Sign in",
    "Account": "Account",
    ...
}

1. And edited to translate into French for fr.json:

{
    "Subscribe": "S'abonner",
    "Sign in ": "Se connecter",
    "Account": "Compte",
    ...
}

1. Upload a theme with a new language file.
2. Go to the General settings in the Ghost Admin.
3. At the top of the page, you'll see the Publication info section
4. Enter the correct language code into your Publication language settings menu.
5. Finally, click Save to activate.

Note: Reactivate the translation file. If you edited the active language, you must restart Ghost to make the changes effective. Alternatively, enter another language code and click Save to activate, then switch back to your code.

Advanced Settings

Editing a Theme's Code

You will encounter information about editing theme files in many places in this documentation.

To edit files, you will need to unzip the theme archive – at this point, you will have access to the necessary files indicated in the theme documentation.

Edit HTML

Step-by-Step

1. To edit your theme files, download a copy of the theme. For this purpose, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
2. Use the Advanced dropdown menu in the upper right corner to download your theme, then unzip the theme locally.
3. Once the theme is unzipped, the files can be edited using a code editor – make the changes indicated in the theme documentation.

You can edit files using applications (code editor) such as Sublime Text, Visual Studio Code or Brackets. Using native text editors like TextEdit on macOS may add formatting that may cause the theme to work incorrectly.

4. After changing the theme code, re-zip the theme directory to upload it back to Ghost.

To create a zip archive on a macOS, right-click on the theme folder to view the context menu. Then, click the Compress option. On Windows, right-click on the theme folder, select Send to, and then select Compressed (zipped) folder.

5. To upload a theme, go to the Design settings in the Ghost Admin and click Change theme in the bottom left corner.
6. Click the Upload theme button in the upper right corner.
7. Once uploaded, click Activate to activate the theme on your site.

Edit CSS

The best way to change the CSS is to use Ghost's built-in Code injection, the change will be applied right after you save the change.

If you need a more powerful way to change the CSS, you can edit it in the theme file. But it would need more technical setup. Follow this guide on How to apply CSS changes in your Ghost theme

If you're only looking to make minor updates to a theme, code injection may be enough.

Code Injection

Another choice for customization is to use the Ghost Code Injection settings in Ghost admin.

For a CSS example, you can use the code in the Site Header section to change the title color and font size.

<style>
  .gh-head-title {
    color: #4550E5;
    font-size: 32px;
  }
</style>

Code injection example

Check out How to use Code Injection Ghost guide for more information.

Theme Deploy with GitHub Actions

Rand comes integrated with the Deploy Ghost Theme Github action. The purpose of the GitHub action is to take the theme from the GitHub repo and send it to your website.

Follow this guide to add GitHub actions Streamline the deployment of your Ghost theme using GitHub Action.

Congratulations on setting up your Rand theme! We hope this documentation has been helpful in getting you started with creating a beautiful and functional website.

Rand is designed to be flexible and easy to customize, offering a wide range of options to make your site unique. With its modular homepage sections, diverse page templates, and extensive customization options, you have everything you need to create a professional online presence.

New theme

Naoto

The most flexible Ghost theme for your personal site.

See more