Jetveo Resorts – Blog Management
A blog is a great way to keep people up to date on what is going with your business. Jetveo Hotel and Resort uses its blog to promote coming events, recap past events and encourage people to visit.
This tutorial will show you how to establish a professional blog that will connect the Jetveo backend to Gatsby, an open-source frontend that will serve as the cover for the user interface.
This tutorial will show how to implement the following elements:
- Use a CMS template
- Connect to Gatsby
NOTE: This text is similar to the “Connect Jetveo CMS to the Gatsby Cloud” tutorial. The Jetveo Platform and App Builder is established through the template, although it can be customized.
Connect Jetveo CMS to the Gatsby Cloud
The blog post will be based on a template: the Jetveo Content Management System (CMS). It will establish the data source for a blog that will be built with pages powered by the Gatsby Cloud.
Later, it can be adjusted to add additional features to the dashboard.
Gatsby (https://www.gatsbyjs.com/) provides development teams with an open-source frontend framework for creating dynamic and fast websites. It will enhance the Jetveo programming experience with a graphic boost for the display of blog information.
This tutorial will take you through the process of establishing a blog.
Overview
There are three general phases with a total of seven steps to establish the connection between the Jetveo CMS and Gatsby in order to create the Resort Blog:
Steps 1, 2, and 3: Creation of the Resort Blog with the Jetveo CMS Template on the Jetveo Platform
Steps 4, 5, and 6: Connect the Resort Blog to the Gatsby Cloud, including
-- the establishment of the new “gatsby-starter-jetveo-blog” repository on your VSC of choice (i.e., GitHub)
-- the establishment of an account for the Gatsby Cloud and the copying of the “gatsby-starter-jetveo-blog” repository to that new account
-- the publication of the site; andStep 7: How to Use the Resort Blog App
The overall setup process will take 15 to 20 minutes, but the speed with which the blogs and information will be provided to end users will be many times faster every time they access it.
Several aspects of the Gatsby frontend can be customized, including color and font. There will also be other options to extend the project.
Creation of the Resort Blog with the Jetveo CMS Template on the Jetveo Platform
STEP 1
On the Jetveo Platform, at the top of the sidebar, click + Create App
. (If you do not have a Jetveo account, go to https://jetveo.io/ and, in the upper right, click Free Account
. You need only provide your name and an email address.)
- For
Application Name
, type: [the name for your app] (i.e., Jetveo Resort Blog Management). - For
Application Template
, select: Jetveo CMS for Gatsby. - Click
Create Application
.
This will create a Development instance for the Resort Blog.
STEP 2
- Click
Settings
- Go to the
Dev Instance
tab to get the login credentials for the instance (i.e., Test User Email, Test User Password). ClickSave
. - Click
Start
(if necessary) to activate the instance. - Click
Open Instance
to open the interface for the Jetveo Resort Blog Management backend. Log in.
STEP 3
The Resort Blog is the source code that defines how the data will be added and maintained. The initial version is a bare-bones template with dummy data. Information for using the Resort Blog is provided below for use after the connection to Gatsby is established.
Connect the Resort Blog to the Gatsby Cloud
STEP 4
Open a new browser tab. Copy and paste the following URL:
https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/jetveo/gatsby-starter-jetveo-blog
Follow the on-screen instructions to your preferred Version Control System (VCS) in order to establish the new “gatsby-starter-jetveo-blog” repository. Then, there is a three-step wizard to connect to the Gatsby Cloud:
(1 of 3) Configure the Jetveo CMS Repository on the Gatsby Cloud
An account for the Gatsby Cloud will be established and the “gatsby-starter-jetveo-blog” repository will be linked to that new account. It will take a few moments for the new repository to be configured. Note: If you encounter a problem, log out of the Gatbsy site then log back in with the link above. For more information: https://support.gatsbyjs.com/hc/en-us/articles/360055994714-I-get-an-error-when-trying-to-create-a-site-from-my-Github-repository.
(2 of 3) Allow integration with other third-party providers
Skip this page. Jetveo is the third-party that is being integrated.
(3 of 3) Define the Environment Variables for the connection between Jetveo and Gatsby
Two Build Variables need to be added:
JETVEO_API_BASE_URL
The first environment variable is: JETVEO_API_BASE_URL
- In the Build Variable data box, type JETVEO_API_BASE_URL in the
Key
databox - Move to the Jetveo Platform and locate the Resort Blog App Overview
- Click
All Instance URLs
- Copy and paste the text in the
Application Instance URL
box - Switch back to the Gatsby Cloud wizard. Paste the Application Instance URL in the
Value
box - IMPORTANT: At the far right side of the Application Instance URL, add the following: /api
The final version of the JETVEO_API_BASE_URL should look similar to this: https://f9d995ef-354b-48f2-b069-14906b7a62d5.eu.jetveo.io/api
JETVEO_API_KEY
The second environment variable is: JETVEO_API_KEY
- Click
Add Variable +
- In the Build Variable data box, type JETVEO_API_KEY in the
Key
databox - Move to the Jetveo Platform and locate the Resort Blog App Overview
- Click
Settings
- Go to the
API
tab - In the Actions column, click
Generate Key
- Copy the generated API Key
- Click
Save
- Switch back to the Gatsby Cloud wizard. Paste the API Key in the
Value
box
The final version of the JETVEO_API_KEY should look similar to this: x8HiXioGPhRqjiUakQ0rhnZqUfp97O2c
STEP 5
The initial build will start automatically. The progress will be shown in the Production section as “Triggered by Gatsby Cloud”. It may take a few moments to build the page.
On the Gatsby Cloud overview, the URL for the frontend for the Resort Blog will be shown under “Hosted on Gatsby Cloud”. When it is built, go to the URL to see the template with dummy data.
STEP 6
The Jetveo backend needs to be connected to the Gatsby Cloud so that changes made in the database will be published.
- Go to the Gatsby Cloud Site Settings tab
- Find the
Builds Webhook
section - Copy the Webhook URL
- Move to the Jetveo Platform and locate the Resort Blog App Overview
- Click
Settings
- Go to the
Configuration
tab - Click
Change
- Copy the Webhook URL into the
Gatsby Cloud Publish Webhook
box
The final version of the Gatsby Cloud Publish Webhook will look similar to this: https://webhook.gatsbyjs.com/hooks/data_source/publish/3a2249bb-3fa9-4964-98bc-b76147c78d20
At this point, the Resort Blog is connected to the Gatsby Cloud.
How to Use the Resort Blog
STEP 7
The initial Resort Blog has dummy text and images. Click Publish
to build changes on the Gatsby Cloud and present them to end users. Note that it may take about a minute for the changes to take effect. You may need to refresh the browser to see the updated status on the Gatsby Cloud Overview.
Note: Occasionally , especially when large image files are added, it may be necessary to go to the Trigger Build drop-down menu and select “Clear Cache and Build Main”.
Here is a quick explanation for the initial version of the Resort Blog:
- On the Resort Blog App instance, click
Start
(if necessary) - Click
Open Instance
The Blog App includes at topbar menu and a simple Dashboard with additional links.
Resort Blog Topbar Menu
Dashboard
Returns the user to the main Dashboard.
Posts
Link to the list of existing posts. Click the Title to edit a post.
Click + Post
to establish a new entry (see Post screenshot).
Title — This text will appear at the top of the blog, on the blog list page, and under the blog image in the Latest Blogs section of the Home page. The title is H2 by default.
Note: Paste text as “plain text”. The text boxes used throughout the app include many options, like text size, alignment, bold, italics, underline, strikethrough, unordered list, ordered list, indent, and the ability to expand the box for editing purposes. The ellipse has advanced features, like specific fonts, specific sizes, color for text and background, tables, images, and videos.
Subtitle — The text that is used here will appear on the blog list as a teaser for the blog post. It can also be a copy of the first paragraph of the blog. It is recommended that the subtitle be a size smaller than the Title (i.e., H3 or H4)
Content — The content is treated as rich-text markdown. Text can be adjusted. Images and videos can be added. See Note above for more information.
Image — This image will be used on the Home page and on the blog list page. The aspect ratio for this image is 175 X 122 (i.e., 430 X 300). PNG is preferred.
Author — Choose the author of the blog post from the drop-down menu. Go to Authors in the topbar to define the options that will be available.
Slug — Establish the specific text that will be added to the URL for this blog post.
Meta Title — This text will be used in the tab of the browser.
Meta Keywords — List keywords for SEO purposes. Separate with commas.
Meta Description — Description for SEO purposes.
Note: When you click + Create
the post is saved as a draft. Then, click Final Version
if it is ready to be posted for end users; this will post it on the site the next time Publish
is clicked.
Pages
Define different sections of the app that are accessible through the topbar menu. “Main” is provided by default; it serves as the front page for the blog and includes a section for “Latest Blogs”. Each page has a header and space for a block of text, which can include images and videos.
The initial page is a list of the Pages. Click + Page
to establish a new entry (see Page screenshot).
Title — The title for the page.
Content — Additional text for the page. This will be displayed under the Title.
Slug — Add the URL extension (e.g., AboutUs) that will complete the link for the page. This is necessary in the Menus section as a target for the link.
Meta Title — This text will be used in the tab of the browser.
Meta Description — Description for SEO purposes.
Meta Keywords — List keywords for SEO purposes. Separate with commas.
Menus
Define the options that will be available in the topbar menu and the menu at the bottom of the page.
The initial page is a list of the established links. Click + Menu
to establish a new entry (see Menu screenshot).
Title — The link that will be shown in the topbar menu. Generally, this is one word or a short phrase (i.e., About Us, Images)
Menu Target — Define the type of target to which the link will direct the user. Select Page or URL. (The next databox below adjusts accordingly.)
Page / URL — Select the specific Page or URL to which the user will be directed.
Order — Define the order of the items in the topbar menu. “1” is the leftmost option. Each successive number is listed to the right. There is a limited amount of space.
Author
Additional information for each blog writer can be added.
The initial page is a list of the Authors. Click + Author
to establish a new entry (see Author screenshot).
Name — The first name of the author.
Surname — The last name of the author.
Image — Upload a mugshot of the writer. The mugshot should be a vertical rectangle. The center of the image will be used as a circular representation next to the Author name on the blog post. The preferred format is PNG.
Publish
Link to the Publish dialog. Click Publish
to render the information provided within the database for end users. Note that it may take a minute or so for the new data to appear on the live page for end users.
Blog App Dashboard
Publish — See above in the topbar menu section.
Create Post — See “Post” above in the topbar menu; this links skips the Post list and goes directly the + Post
dialog.
Settings — The overall settings for the app are maintained in this section, including:
- Logo — The image that is at the top left of the topbar (i.e., “blog”)
- Home Page Image — The horizontal strip just under the topbar. The aspect ratio for this image is 336:43 (i.e., 1344 X 172). PNG is preferred.
- Author — This text is used in the copyright information at the bottom of the Home page.
- Default Meta Title — The title that is used in the web browser.
- Default Meta Keywords — List of keywords for SEO purposes. Separate with commas.
- Default Meta Description — Description for SEO purposes.
Specific Steps to Brand the Blog
1. Dashboard
Click Settings
. There are several elements of the Dashboard that can be updated.
Logo
is the image that is at the top left of the topbar (i.e., “blog”)Home Page Image
is horizontal strip just under the topbar. The aspect ratio for this image is 336:43 (i.e., 1344 X 172). PNG is preferred.Author
is the name that will be used in the copyright information at the bottom of the blog.
2. Pages
Click on Home
in the list. Change the Title and Content. The Title will be superimposed over the Home Page Image. The Content will be placed just underneath the Home Page Image.
You can also create another Page (e.g., About Us). Know that you will also need to add this page to the Menu (and adjust the order as necessary).
3. Author
Add author name and mugshots. This will used when you make posts. Delete the dummy data.
4. Posts
Add a post. (See the instructions above for more details.)
- The image will be used on the Home page and on the blog list page. The aspect ratio for this image is 175 X 122 (i.e., 430 X 300). PNG is preferred.
- Delete the dummy-data post. (Note: at least one blog posts needs to be in the “Final Version” state.)
5. SEO
Adjust the Meta information (i.e., Default Meta Title, Default Meta Keywords, Default Meta Description) for SEO purposes, as necessary.
Then the blog is ready to go. Continue to add blogs as necessary. You can also customize parts of the blog through the App Builder.