¶ Introduction
¶ Last updated: 08-18-2022
This documentation goes over everything needed for our Community Template v2.
Information about the configs and setup is all stated below.
Important Note
Please note that this guide is made as if you were installing the template onto a Linux VPS.
We do not recommended changing anything but theconfig.js,appData.jsat any time.
Also do NOT edit the very bottom line of code in both files!
¶ Installation
Once you have purchased the Community Template you will get access to download the website.
This website is build with ExpressJs on the NodeJs framework.
If you are trying to host this, then you will need a VPS. Shared-Hosting will not work.
The guide from this point foward is assuming that your Linux VPS is already up, and you've logged-in on both terminal and SFTP.
¶ Server Setup
Installing Nginx
We will start by updating and install Nginx.
Tip: Enter one command at a time when using a command-line interface.
sudo apt update
sudo apt install nginx
You will be prompted to press Y to install Nginx, do so.
Once Nginx has finished installing, you will be able to vist the starter page at http://serverIP.
If you see the this, you have install Nginx successfully:
Installing Node.Js
Next up, you will need to get Node.Js installed on your server to ensure that all of the website's system work properly. We will install and use Node Package Manager (NVM) for this.
Install NVM along with Node.Js with:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
nvm install 16.13.2
Installing Certbot (SSL)
Last thing to get installed is Certbot. This will allow you to automatically issue and install SLL certificates onto your domains.
sudo apt install certbot python3-certbot-nginx
¶ File Install
At least point, you will be doing somethings in SFTP & Terminal.
Nginx Configuration
Using your SFTP viewer, head to /etc/nginx/sites-available/default. This is the default config for sites with Nginx.
Delete all current content within the file and replace it with:
server {
server_name example.com; # Change domain to your domain
location / {
proxy_pass http://localhost:3000; # Change the port if needed.
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Real-IP $remote_addr;
}
}
Once that is updated and saved, do the following:
sudo systemctl restart nginx
SSL Certificate Creation
To issue the certificate for Nginx run the following command. Make sure to replace example.com with your domain.
sudo certbot --nginx -d example.com
You may be asked to provide details such as an email, do so. (That info is private.)
There will be a redirect method selection, pick option 2.
Now that the certificate is officially issued, assuming no errors showed up for you, we want to make it renew itself.
sudo certbot renew --dry-run
Installing Site Files
This should be the easiest part of the install.
Using your SFTP application, head to the /home directory. Once there, create a directory for the website, communitytemplate.
Then, simply drag all the site's files into that folder.
¶ Configuring the Site
All information related to content within the config.js and appData.js is listed as comments within the files. Please use those, as they explain most everything.
Also note, that some things without comments or such are quite simple, so do not over think things.
REMINDER:
Keep the same formatting to items. If it is a string, array, object, etc, leave it as such. Do NOT try to make a string an array or anything of the nature.
Please contact us via a discord ticket if you have any issues or concerns.
¶ Resources
Below are all the configs used for this site. A default version is provided incase you break something, want to start over, or need to look at the original configs.
/// PLEASE REFER TO https://docs.shadowdevs.com/website/communitytemplate FOR HELP ///
const config = {
/// SITE SETTINGS ///
siteInfo: {
licenseKey: '', // https://license.shadowdevs.com
port: 5000, // Must be a number (integer, not string) & not blank // 3000 is recommended if you don't know and have no other sites using it on your server.
domain: 'http://localhost', // NO trailing slashes
siteName: 'My Community',
siteLogo: '/img/logo.png', // This is the favicon
headerImage: '/img/banner.png', // This also goes to the site's embed if enabled
siteDescription:
'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit illum saepe, modi dolorum molestias, optio possimus et consequatur dolorem porro vel cumque officiis non officia, dolores incidunt repellat corrupti iste.',
siteBackground: '/img/bg.jpg',
siteTags:
'my community, my server, my website, designe by shadow development, shadow development, website',
// Site tags are for SEO, so include as many as you want and make sure to separate them with a comma / space, EXCEPT the last one
},
theme: {
themeColor: '#4294ff',
buttonColor: '#5d89d5',
buttonHoverColor: '#4ea4bc',
linkColor: '#81C4DF',
textColor: '#fff',
embedColor: '#4294ff',
embedImageActive: true, // This will allow the headerImage to appear on link embeds
},
socialButton: {
icon: 'discord', // Available Icons: discord, twitter, youtube, globe, facebook, tiktok, twitch
name: 'Our Discord',
link: 'https://discord.gg/fVrRa8z',
},
discordWebhook: {
botName: '', // Default: Application Response
logo: '', // Default: https://shadowdevs.com/img/Logo.png
footer: '', // Default: Application Recorder | © 2022 Shadow Development
color: '', // Hex codes only | Default: #9d2a2c
fallbackUrl: '', // The webhook url the bot will fall back on if no url is filled out for a certain application
},
// ------------- //
/// HEADER SETTINGS ///
headerButtons: [
{
url: '/',
text: 'Home',
},
{
url: '/apply',
text: 'Apply',
},
{
url: '/gallery',
text: 'Gallery',
},
{
url: '/team',
text: 'Team',
},
{
url: '/donate',
text: 'Donations',
},
{
url: '/',
text: 'Change Via Config',
},
],
/// ----------- ///
/// FOOTER SETTINGS ///
footerCopyRight: true,
customFooterText:
'<a href="/terms">Terms and Conditions</a> • <a href="/privacy">Privacy Policy</a>',
// IconTypes are either 'social', 'internal', and 'external'
// If 'social' then the Available Icons options: discord, twitter, youtube, globe, facebook, tiktok, twitch
// If 'internal' the path must be within /img/, but don't add that
// If 'external' it must be a img link from the internet
footerButtons: [
{
url: '/',
type: 'social',
img: 'discord',
},
{
url: '/',
type: 'external',
img: 'https://png2.cleanpng.com/sh/e12e300a0c93eff3292a27b453bdf04c/L0KzQYm3VMAzN5doj5H0aYP2gLBuTfVuaZpxRdNtZILog8S0gB9ueKZ5feQ2aXPyfsS0kCluapDxRdd2YXnvPb7okvtmfJpzReVubnSwdb7oifwuaqZ5jNH3LUXkc4O9hcM3QJdnSNYBLkW6Roe4WMA5OWY3SqgEMUa2SIaBWMYveJ9s/kisspng-email-address-computer-icons-symbol-email-marketin-send-email-button-5ac26e368fb0d6.5766180815226916385886.png',
},
{
url: '/',
type: 'internal',
img: 'icons/question-circle-regular.svg',
},
],
// ------------- //
/// HOME PAGE SETTINGS ///
buttonHomePageActive: true,
buttonHomePageLink: '#',
buttonHomePageText: 'Jump in Now!',
heroText: 'My Community',
heroDescription: '', // Leave blank to use siteDescription
// INFO SECTION //
infoSectionActive: true,
infoSectionTitle: 'Information', // Leave blank to disable
colOneImage: '/img/icons/users-solid.svg',
colOneText: 'Change the image and text in the config!',
colTwoImage: '/img/icons/users-solid.svg',
colTwoText:
'Quibusdam, inventore quam voluptate totam distinctio accusantium dolor porro natus error facilis fugiat esse in vero ipsam iste suscipit iure labore.',
colThreeImage: '/img/icons/users-solid.svg',
colThreeText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
// LINKS SECTION //
linksSectionActive: true,
linksSectionTitle: 'Cool Links', // Leave blank to disable
homeLinks: [
{
url: '#',
text: 'Cool Link 1',
},
{
url: '#',
text: 'Cool Link 2',
},
{
url: '#',
text: 'Cool Link 3',
},
{
url: '#',
text: 'Cool Link 4',
},
{
url: '#',
text: 'Cool Link 5',
},
{
url: '#',
text: 'Cool Link 6',
},
],
// Gallery SECTION //
gallerySectionActive: true,
gallerySectionTitle: 'Gallery Preview', // Leave blank to disable
homeGallery: ['/img/bg1.jpg', '/img/bg2.jpg', '/img/bg3.jpg'],
// TEAM SECTION //
teamSectionActive: true,
teamSectionTitle: 'Community Leaders', // Leave blank to disable
homeTeam: {
one: {
active: true,
image: '/img/person.jpg',
name: 'Guy 1 Name',
rank: 'Guy 1 Rank',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta libero, beatae deleniti, dicta iste modi nam pariatur fuga doloribus magnam, a quis! Fugit culpa molestias hic maxime ea atque laboriosam.',
},
two: {
active: true,
image: '/img/person.jpg',
name: 'Guy 2 Name',
rank: 'Guy 2 Rank',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta libero, beatae deleniti, dicta iste modi nam pariatur fuga doloribus magnam, a quis! Fugit culpa molestias hic maxime ea atque laboriosam.',
},
three: {
active: true,
image: '/img/person.jpg',
name: 'Guy 3 Name',
rank: 'Guy 3 Rank',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta libero, beatae deleniti, dicta iste modi nam pariatur fuga doloribus magnam, a quis! Fugit culpa molestias hic maxime ea atque laboriosam.',
},
// You can NOT add more then three people without editing code in the index.ejs.
},
// ------------- //
/// APPLY PAGE ///
appsPageTitle: 'Community Applications',
appsPageDesc:
'Below is a list of all our applications and their status. If you have any questions please contact us.',
appSections: {
main: {
active: true,
title: 'Main',
Desc: '', // Leave blank to disable
},
second: {
active: true,
title: 'Second',
Desc: '', // Leave blank to disable
},
third: {
active: true,
title: 'Third',
Desc: '', // Leave blank to disable
},
},
// CLOSED APPS PAGE //
closedAppsImg: '/img/x.gif',
closedAppsMessage:
'The application you are trying to access is currently closed.',
// ------------- //
/// Gallery PAGE ///
galleryTitle: 'Gallery',
galleryDesc:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt consectetur quaerat laudantium.',
// You can use locally stored images or ones from the online, but if they come from online ensure the link ends with a image file type such as .png, .jpg, .svg, etc
galleryImages: [
'https://images.pexels.com/photos/919606/pexels-photo-919606.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'/img/bg1.jpg',
'/img/bg2.jpg',
'/img/bg3.jpg',
'https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
'https://images.pexels.com/photos/2478248/pexels-photo-2478248.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
],
// ------------- //
/// TEAM PAGE ///
teamTitle: 'Team',
teamDesc:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt consectetur quaerat laudantium, deserunt officia itaque fuga esse odit, aliquam similique.',
// The order of these correspond with the section number you put in teamMembers.
teamSections: ['Section 1', 'Section 2'],
// ------------- //
/// DONATION PAGE ///
donateTitle: 'Looking to support what we do here?',
donateDesc:
'Our community means the world to us, but as all things in life, it cost money to keep running. That is why we do our best to support the server and amazing donators help make it easier on us!',
donateInfo: [
// Each item in the array is a new pargraph (<p>).
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore',
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore',
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore',
],
donateDisclaimer: {
active: true,
text: [
// Each item in the array is a new pargraph (<p>).
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore',
'Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore',
],
},
donateLinks: {
// The key is the link pre-fix. | The value is the link.
// If the key is "Other" or "Note", the value will not be an active link.
Patreon: 'https://shadowdevs.com',
Paypal: 'https://shadowdevs.com',
Other: 'This is text.',
},
// ------------- //
};
const teamMembers = [
// The section number corresponds with the order of items in teamSections.
{
name: 'Bob',
rank: 'Owner',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 1,
},
{
name: 'Joe',
rank: 'Owner',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 1,
},
{
name: 'Jim',
rank: 'Co-Owner',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 1,
},
{
name: 'Tom',
rank: 'Manager',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 2,
},
{
name: 'Tony',
rank: 'Admin',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 2,
},
{
name: 'Bobby',
rank: 'Admin',
desc: 'A cool person.',
imgLink: '/img/person.jpg',
section: 2,
},
];
const applications = {
// For the link do not include and forward or trailing slashes, special characters, and should be in all lower case.
// It should only be based on the name you input into the appData.js as the JSON Key.
// Links can NOT be a duplicate, even if they are in a different section.
mainApplications: [
{ name: 'First App', link: 'first', status: 'Open' },
{ name: 'Second App', link: 'second', status: 'Open' },
],
secondApplications: [
{ name: 'Third App', link: 'third', status: 'Closed' },
{ name: 'Fourth App', link: 'fourth', status: 'Closed' },
{ name: 'Fith App', link: 'fith', status: 'Closed' },
],
thirdApplications: [
{ name: 'Sixth App', link: 'sixth', status: 'Closed' },
{ name: 'Seventh App', link: 'seventh', status: 'Closed' },
],
};
const customPageData = [
// URL should not have any forawrd or trailing slash. EX: example | EX2: example/test
// Do NOT put HTML in the title, but you can put it into the content section.
// Style Options: 1 (Like TOS Page), 2 (Like the Apply Page), 3 (No Background), 4 (Custom)
{
title: 'Example',
url: 'example',
style: 1,
customCSS: [''], // Only applies if your usting style: 4 | Files Only (Internal or External)
customJS: [''], // Intenal or External links to JS files
content:
'<h1>Example<h1><p><a href="/">Lorem ipsum</a>, dolor sit amet consectetur <b>adipisicing elit</b>. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae convallis turpis, sed molestie ex. Nam sit amet lacus non quam molestie imperdiet eu vitae erat. Sed blandit risus mauris, rhoncus dapibus dolor iaculis at. Nullam commodo ex sit amet ligula dapibus, sed aliquet diam faucibus. Maecenas tincidunt nisl eget velit porttitor efficitur. Praesent rhoncus at tortor vel dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nunc arcu, ultricies nec quam vitae, vestibulum molestie tortor. Nunc consectetur dui eget odio feugiat, at elementum ante porttitor. </p> <p> Curabitur eros mi, efficitur et porta eu, mollis non nunc. In hac habitasse platea dictumst. Duis efficitur quam blandit viverra porta. Curabitur nisl tortor, semper hendrerit sollicitudin pulvinar, eleifend vitae nisi. Phasellus elementum risus fermentum elit eleifend feugiat. Mauris ac libero ut est accumsan cursus eu eu ante. Fusce id vestibulum nunc. Etiam pharetra feugiat justo, vitae dictum diam dignissim ac. Praesent tincidunt nunc leo, id facilisis massa iaculis a. Aliquam ac lectus cursus, ornare quam id, lobortis diam. Vivamus rhoncus fermentum ornare. Integer vel egestas augue, feugiat pellentesque libero. Vivamus vel sem molestie, vestibulum urna et, aliquet mauris. Nam sed molestie lectus.</p>',
},
{
title: 'Example Two',
url: 'example/two',
style: 2,
customCSS: [''], // Only applies if your usting style: 4 | Files Only (Internal or External)
customJS: [''], // Intenal or External links to JS files
content:
'<h1>Example<h1><p><a href="/">Lorem ipsum</a>, dolor sit amet consectetur <b>adipisicing elit</b>. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae convallis turpis, sed molestie ex. Nam sit amet lacus non quam molestie imperdiet eu vitae erat. Sed blandit risus mauris, rhoncus dapibus dolor iaculis at. Nullam commodo ex sit amet ligula dapibus, sed aliquet diam faucibus. Maecenas tincidunt nisl eget velit porttitor efficitur. Praesent rhoncus at tortor vel dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nunc arcu, ultricies nec quam vitae, vestibulum molestie tortor. Nunc consectetur dui eget odio feugiat, at elementum ante porttitor. </p> <p> Curabitur eros mi, efficitur et porta eu, mollis non nunc. In hac habitasse platea dictumst. Duis efficitur quam blandit viverra porta. Curabitur nisl tortor, semper hendrerit sollicitudin pulvinar, eleifend vitae nisi. Phasellus elementum risus fermentum elit eleifend feugiat. Mauris ac libero ut est accumsan cursus eu eu ante. Fusce id vestibulum nunc. Etiam pharetra feugiat justo, vitae dictum diam dignissim ac. Praesent tincidunt nunc leo, id facilisis massa iaculis a. Aliquam ac lectus cursus, ornare quam id, lobortis diam. Vivamus rhoncus fermentum ornare. Integer vel egestas augue, feugiat pellentesque libero. Vivamus vel sem molestie, vestibulum urna et, aliquet mauris. Nam sed molestie lectus.</p>',
},
{
title: 'Example three',
url: 'example-three',
style: 3,
customCSS: [''], // Only applies if your usting style: 4 | Files Only (Internal or External)
customJS: [''], // Intenal or External links to JS files
content:
'<h1>Example<h1><p><a href="/">Lorem ipsum</a>, dolor sit amet consectetur <b>adipisicing elit</b>. Blanditiis laudantium optio, fuga doloribus sit vero dolores molestiae culpa, veritatis quas iusto excepturi possimus id nemo vitae. Earum quasi tempore labore</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae convallis turpis, sed molestie ex. Nam sit amet lacus non quam molestie imperdiet eu vitae erat. Sed blandit risus mauris, rhoncus dapibus dolor iaculis at. Nullam commodo ex sit amet ligula dapibus, sed aliquet diam faucibus. Maecenas tincidunt nisl eget velit porttitor efficitur. Praesent rhoncus at tortor vel dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nunc arcu, ultricies nec quam vitae, vestibulum molestie tortor. Nunc consectetur dui eget odio feugiat, at elementum ante porttitor. </p> <p> Curabitur eros mi, efficitur et porta eu, mollis non nunc. In hac habitasse platea dictumst. Duis efficitur quam blandit viverra porta. Curabitur nisl tortor, semper hendrerit sollicitudin pulvinar, eleifend vitae nisi. Phasellus elementum risus fermentum elit eleifend feugiat. Mauris ac libero ut est accumsan cursus eu eu ante. Fusce id vestibulum nunc. Etiam pharetra feugiat justo, vitae dictum diam dignissim ac. Praesent tincidunt nunc leo, id facilisis massa iaculis a. Aliquam ac lectus cursus, ornare quam id, lobortis diam. Vivamus rhoncus fermentum ornare. Integer vel egestas augue, feugiat pellentesque libero. Vivamus vel sem molestie, vestibulum urna et, aliquet mauris. Nam sed molestie lectus.</p>',
},
];
/// PLEASE REFER TO https://docs.shadowdevs.com/website/communitytemplate FOR HELP ///
module.exports = { config, teamMembers, applications, customPageData };
/// PLEASE REFER TO https://docs.shadowdevs.com/website/communitytemplate FOR HELP ///
// The text (JSON Key) before the ": { title: '', desc: '', type: '', link: ''}" is the
// link name that you placed within the config.js, under the "applications" section at the bottom.
// Ensure you are NOT using uppercase, special characters, slashes, dashes, or anything of the nature.
// You can NOT have a JSON Key be a duplicate!
const appData = {
first: {
// <-- Text before the ": {" is the aforementioned text, aka a "JSON Key".
title: 'First App',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, dolorem quisquam quas architecto, ut porro molestiae nihil reprehenderit, nulla facilis quam aperiam consectetur odit. Quidem laudantium nemo animi consequatur deleniti.',
type: 'discord', // Options: "discord" and "google"
// The link section only matters if your type is set to "google".
link: '',
// The channelWebhook only matters if your type is set to "discord".
channelWebhook: '',
},
second: {
// <-- Text before the ": {" is the aforementioned text, aka a "JSON Key".
title: 'Second App',
desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, dolorem quisquam quas architecto, ut porro molestiae nihil reprehenderit, nulla facilis quam aperiam consectetur odit. Quidem laudantium nemo animi consequatur deleniti.',
type: 'google', // Options: "discord" and "google"
// The link section only matters if your type is set to "google".
link: 'https://docs.google.com/forms/d/e/1FAIpQLSc81OBt2FKIHBrw-Ob5WkI5Eg8G6oTpczOEvXDy3D96X7bGsQ/viewform',
// The channelWebhook only matters if your type is set to "discord".
channelWebhook: '',
},
};
const discordData = {
// Ensure the JSON keys match with the ones above.
// Non-Question Types: title, titleS, desc, line
// Question Types: text, textLong, dropDown, checkBox
// Please refer to the docs for more details about non-question/question types. (https://docs.shadowdevs.com)
first: [
{ title: 'Section 1' },
{ text: 'Your Name' },
{ text: 'Your Email' },
{ line: true },
{ title: 'Section 2' },
{ textLong: 'Details' },
{ titleS: 'Dropdown' },
{ dropDown: ['One', 'Two', 'Three'] },
{ line: true },
{ title: 'Section 3' },
{ desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.' },
{
checkBox: 'Do you agree to our <a href="/terms" target="_blank">TOS</a>?',
},
],
};
/// PLEASE REFER TO https://docs.shadowdevs.com/website/communitytemplate FOR HELP ///
module.exports = { appData, discordData };