Skip to content
main
Go to file
Code
This branch is 10 commits ahead, 2 commits behind digitalocean:main.

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.do
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

portfolio-do-hackathon

GitHub repo size GitHub language count GitHub top language GitHub last commit GitHub stars GitHub forks GitHub watchers GitHub followers Buy Me A Coffee donate button Patreon donate button

Getting Started

These steps will get this sample application running for you using DigitalOcean.

Note: Following these steps will result in charges for the use of DigitalOcean services

Table of Contents

Requirements

  • You need a DigitalOcean account. If you don't already have one, you can sign up at DigitalOcean.com

Forking the Sample App Source Code

To use all the features of App Platform, you need to be running against your own copy of this application. To make a copy, click the Fork button above and follow the on-screen instructions. In this case, you'll be forking this repo as a starting point for your own app (see Github documentation to learn more about forking repos.

After forking the repo, you should now be viewing this README in your own github org (e.g. https://github.com/<your-org>/sample-hugo)

Note: You can skip forking this repo and select the "Hugo" sample from the app creation page, however do notice that certain features will be disabled.

Deploying the App

Click this button to deploy the app to the DigitalOcean App Platform.

Deploy to DO

Making Changes to Your App

As long as you left the default Autodeploy option enabled when you first launched this app, you can now make code changes and see them automatically reflected in your live application. During these automatic deployments, your application will never pause or stop serving request because the App Platform offers zero-downtime deployments.

Learn More

You can learn more about the App Platform and how to manage and update your application at https://www.digitalocean.com/docs/app-platform/.

Deleting the App

When you no longer need this sample application running live, you can delete it by following these steps:

  1. Visit the Apps control panel at https://cloud.digitalocean.com/apps
  2. Navigate to the sample-hugo app
  3. Choose "Settings"->"Destroy"

This will delete the app and destroy any underlying DigitalOcean resources.

Note: If you don't delete your app, charges for the use of DigitalOcean services will continue to accrue.

Customizing the Homepage

You can customize the homepage by editing the homepage.yml file located in the folder data.

Project Structure

 root/                            <-- Root of your project
   |- config.black-and-light.toml <-- Config file for black-and-light theme
   |- config.toml                 <-- Config file for somrat theme (DEFAULT)
   +- .do/                        <-- Holds any DO deployment file
   +- content/                    <-- Holds any blog articles (NOT USED by somrat theme)
   +- data/                       <-- Holds any homepage file (copied from somrat exampleSite)
   +- layouts/                    <-- Holds any partial file (NOT USED by somrat theme)
   +- resources/                  <-- Holds any resource file (NOT USED by somrat theme)
   +- static/                     <-- Holds any static file (copied from somrat exampleSite)
   +- themes/                     <-- Holds any Hugo theme

Enabling a Section

It is trivial to enable or disable a section within the homepage.

Open the file homepage.yml, find the relevant section and edit the setting to true or false. For example:

portfolio:
  enable : true

The menu must be enabled or disabled separately within the config.

Open the file config.toml, find the relevant menu and comment or uncomment the setting. For example, to disable the menu:

#[[menu.main]]
#URL = "#portfolio"
#name = "Portfolio"
#weight = 4

Advanced Customization

If you require more advanced customization, such as HTML/JS/CSS, than is permissible from the config file, you will have to modify the files under themes folder.

Themes Structure

 root/                            <-- Root of your project
   +- themes/                     <-- Holds any Hugo theme
      +- somrat/                  <-- Theme as a git submodule
         |- index.html            <-- Default HTML index file used to render homepage.yml
         |- 404.html              <-- Default HTML error file
         +- assets/               <-- Holds any CSS/JS file
            +- css/               <-- Holds any CSS file
            +- js/                <-- Holds any JS file
         +- layouts/              <-- Holds any partial file

Adding a Section

To add a new section within the homepage:

  • Add a new section in homepage.yml
  • Add a new section in index.html
  • Add a new menu in config.toml
  1. Open the file homepage.yml, copy and paste a new section. For example:
############################## rank #################################
rank:
  enable: true
  title: "GLOBAL RANK"
  rank_list:
    - name: "Summary"
      link: https://cr-ss-service.azurewebsites.net/api/ScreenShot?widget=summary&username=dennislwm

    - name: "Skills Chart"
      link: https://cr-skills-chart-widget.azurewebsites.net/api/api?username=dennislwm
  1. Open the file index.html, copy and paste a new section. For example:
<!-- =============================
      Start Rank
    =============================== -->
<section class="rank" id="rank">
  {{ if $data.homepage.rank.enable }}
  {{ with $data.homepage.rank }}
  <div class="container">
    <div class="row">
      <div class="col-lg-12 mx-auto col-sm-10">
        <div class="wow fadeInUp" data-wow-duration="1.5s">
          <div class="rank-heading">
            <div class="bar"></div>
            <h1>{{ .title }}</h1>
          </div>
          <div class="row">
            {{ range .rank_list }}
            <div class="col-lg-12 mx-auto col-sm-10">
              <div class="rank-label">
                <h4 style="margin-top:10px">{{ .name | markdownify }}</h4>
                <img class="rank-img img-fluid" src="{{ .link | absURL }}" alt="{{ .name | markdownify }}">
              </div>
              <!--<div class="rank-label">{{ .name | markdownify }}</div>-->
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ end }}
  {{ end }}

</section>
<!-- =============================
           End Rank
        =============================== -->
  1. Open the file config.toml, copy and paste a new menu. For example:
[[menu.main]]
URL = "#rank"
name = "Rank"
weight = 4

📫 How to reach me

Buy Me A Coffee donate button Patreon donate button

  • 🔭 I’m currently working on Github Actions for Python and publish on Netlify
  • 🌱 I’m currently learning freecodecamp
  • 👯 I’m looking to collaborate on Darwinex ZeroMq Connector
  • 🤔 I’m looking for help with Blender
  • 💬 Ask me about Any Geek stuff
  • 😄 Pronouns: happi, grateful
  • Fun fact: I'm a Star Wars fan

GitHub metrics

Python, R and Metatrader for Happi Traders

https://fxgit.work

FREE $100 CREDIT

https://digitalocean.com

About

 App Platform sample Hugo application.

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.